ดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งาน
 

 

     CSS ย่อมาจาก Cascading Style Sheet มักเรียกโดยย่อว่า “สไตล์ชีท” คือ ภาษาที่ใช้เป็นส่วนของการจัดรูปแบบการแสดงผลเอกสาร htmlโดยที่ CSS กำหนดกฎเกณฑ์ในการระบุรูปแบบ หรือ “Style” ของเนื้อหาในเอกสาร โดยบทความนี้จะกล่าวถึง การฟิคแถบ Navbar (เมนูบาร์ ซึ่งเป็นส่วนประกอบสำคัญบนเว็บไซด์ ในปัจจุบันอาจจะมีทั้ง jQuery หรือ JAVASCRIPT ที่มาช่วยให้เราสร้างเมนูบาร์ได้ง่ายขึ้น) โดยใช้ JavaScriptเข้ามาช่วย

     โดยในบทความนี้จะกล่าวถึงการฟิค Navbar ที่เคยฟิคไปแล้ว แต่ในโหมดมือถือจะเลือกให้ฟิคในส่วนที่ต้องการเท่านั้น

 

รูปแบบโค้ด CSS

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

@media (width:320px){   // ขนาดที่กำหนดไว้
.sticky_1 {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 2000;
}
.notst{
    position: relative; 
}

 

รูปแบบโค้ด JavaScript

 <script>
        window.onscroll = function() {myFunction()};
        var navbar = document.getElementById("navbar");
        var navbar_1 = document.getElementById("navbar_1");
        var navbar_2 = document.getElementById("navbar");
        var sticky_1 = navbar_1.offsetTop;
        var sticky = navbar.offsetTop;

        function myFunction() {
          if (window.pageYOffset >= sticky) {
            navbar.classList.add("sticky")
          }
          if (window.pageYOffset >= sticky_1) {
            navbar_1.classList.add("sticky_1")
            navbar_2.classList.add("notst")
          }
          else {
            navbar_1.classList.remove("sticky_1");
            navbar.classList.remove("sticky");
            navbar_2.classList.remove("notst")
          }
          
        }
          
    </script>

 

ตัวอย่างโค้ด

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  margin: 0;
  font-size: 28px;
}

.header {
  background-color: #f1f1f1;
  padding: 30px;
  text-align: center;
}

#navbar {
  overflow: hidden;
  background-color: red;
}

#navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

#navbar a:hover {
  background-color: #ddd;
  color: black;
}

#navbar a.active {
  background-color: #4CAF50;
  color: white;
}



#navbar_1 {
  overflow: hidden;
  background-color: red;
}

#navbar_1 a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

#navbar_1 a:hover {
  background-color: #ddd;
  color: black;
}

#navbar_1 a.active {
  background-color: #4CAF50;
  color: white;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky + .content {
  padding-top: 60px;
}


@media (width:320px){
.sticky_1 {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 2000;
}
.notst{
    position: static; 
}
}


</style>
</head>
<body>

<div class="header">
  <h2>Scroll Down</h2>
</div>

<div id="navbar">
  <a class="active">Home</a>
  <a>News</a>
  <a>Contact</a>
</div>
    
<div id="navbar_1">
  <a class="active">Home_1</a>
  <a>News</a>
  <a>Contact</a>
</div>

<div class="content">
  <h3>Sticky Navigation</h3>
  <p>Hello, I am mindphp.</p>
  <p>I love you.</p>
  <p>I love you.</p>
  <p>I love you.</p>
  <p>I love you.</p>
  <p>I love you.</p>
  <p>I love you.</p>
  <p>I love you.</p>
  <p>I love you.</p>
  <p>I love you.</p>
  <p>I love you.</p>
  <p>I love you.</p>
  <p>I love you.</p>
  <p>I love you.</p>
  <p>I love you.</p>
  <p>I love you.</p>
</div>

<script>
 window.onscroll = function() {myFunction()};
        var navbar = document.getElementById("navbar");
        var navbar_1 = document.getElementById("navbar_1");
        var navbar_2 = document.getElementById("navbar");
        var sticky_1 = navbar_1.offsetTop;
        var sticky = navbar.offsetTop;

        function myFunction() {
          if (window.pageYOffset >= sticky) {
            navbar.classList.add("sticky")
          }
          if (window.pageYOffset >= sticky_1) {
            navbar_1.classList.add("sticky_1")
            navbar_2.classList.add("notst")
          }
          else {
            navbar_1.classList.remove("sticky_1");
            navbar.classList.remove("sticky");
            navbar_2.classList.remove("notst")
          }
          
        }
</script>

</body>
</html>

 

ผลลัพธ์

 

เมื่อยังไม่ได้เลื่อน Scroll Down ในหน้า desktop

เมื่อยังไม่ได้เลื่อน Scroll Down ในหน้า Desktop
เมื่อยังไม่ได้เลื่อน Scroll Down ในหน้า Desktop

 

เมื่อเลื่อนเมาส์ Scroll Down  ในหน้า desktop

เมื่อเลื่อนเมาส์ Scroll Down  ในหน้า desktop
เมื่อเลื่อนเมาส์ Scroll Down ในหน้า desktop

 

เมื่อยังไม่ได้เลื่อน Scroll Down ในหน้า Mobile

เมื่อยังไม่ได้เลื่อน Scroll Down ในหน้า Mobile
เมื่อยังไม่ได้เลื่อน Scroll Down ในหน้า Mobile

 

เมื่อเลื่อนเมาส์ Scroll Down  ในหน้า Mobile

เมื่อเลื่อนเมาส์ Scroll Down  ในหน้า Mobile
เมื่อเลื่อนเมาส์ Scroll Down ในหน้า Mobile

 

ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : HTML css CodeIgniter Framework

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
มาแล้ว Plugin System MooZiiCart Auto Close สำหรับตั้งเวลาเปิดปิดระบบการสั่งซื้อสินค้าออนไลน์
โดย prmindphp พ 19 ก.พ. 2020 6:40 pm บอร์ด MindPHP News & Feedback
0
8
พ 19 ก.พ. 2020 6:40 pm โดย prmindphp
ถ้าคุณต้องเลือก
โดย noppadonsk พ 19 ก.พ. 2020 11:22 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
9
พ 19 ก.พ. 2020 11:22 am โดย noppadonsk
อยากจะทราบว่าวิธีการแสดงค่าอาเรย์แต่ล่ะค่าครับ
โดย waterwelon พ 19 ก.พ. 2020 11:04 am บอร์ด Programming - PHP
2
25
พ 19 ก.พ. 2020 11:58 am โดย thatsawan
คลายเครียด
โดย noppadonsk อ 18 ก.พ. 2020 2:50 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
24
อ 18 ก.พ. 2020 2:50 pm โดย noppadonsk
7 สิ่งที่ต้องปรับปรุงเพื่อลดค่า Bounce Rate บนหน้าเว็บไซต์
โดย phasamon อ 18 ก.พ. 2020 10:22 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
15
อ 18 ก.พ. 2020 10:22 am โดย phasamon
อยากให้ธุรกิจเป็นที่รู้จักบนโลกออนไลน์ ลองหาบริษัทรับทำ SEO ดูซิ !
โดย totheworld จ 17 ก.พ. 2020 3:34 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
55
จ 17 ก.พ. 2020 3:34 pm โดย totheworld
สี่เหตุผลที่ควรปรับปรุงเว็บไซต์
โดย phasamon จ 17 ก.พ. 2020 2:05 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
36
จ 17 ก.พ. 2020 2:05 pm โดย phasamon
อย่าได้พลาดเชียว
โดย noppadonsk จ 17 ก.พ. 2020 10:52 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
14
จ 17 ก.พ. 2020 10:52 am โดย noppadonsk
วิธีการแก้ไขปํญหา undefined index กรณีกำหนดเงือนไขเทียบค่าอาร์เรย์
โดย Ittichai_chupol ศ 14 ก.พ. 2020 5:50 pm บอร์ด PHP Knowledge
0
67
ศ 14 ก.พ. 2020 5:50 pm โดย Ittichai_chupol
เรื่องน่าเศร้า
โดย noppadonsk ศ 14 ก.พ. 2020 10:19 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
64
ศ 14 ก.พ. 2020 10:19 am โดย noppadonsk
อยากทรบวิธีจัดการไม่ให้สมาชิกที่อยู่ในกลุ่มที่กำหนดมาส่องโพสต์ของผู้อื่นได้
โดย Ittichai_chupol พฤ 13 ก.พ. 2020 3:22 pm บอร์ด Programming - PHP
3
89
พฤ 13 ก.พ. 2020 5:31 pm โดย thatsawan
กลับไปเริ่มใหม่
โดย noppadonsk พฤ 13 ก.พ. 2020 10:57 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
51
พฤ 13 ก.พ. 2020 10:57 am โดย noppadonsk
อยากทราบการเอาเลขมาคุณในช่อง 10อัน แล้วมาแล้วผลข้างล่างครับ
โดย comopal พ 12 ก.พ. 2020 6:49 pm บอร์ด Programming - PHP
1
111
พฤ 13 ก.พ. 2020 9:39 am โดย LEG
ต้องรีบเดี๋ยวลืม
โดย noppadonsk พ 12 ก.พ. 2020 10:56 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
50
พ 12 ก.พ. 2020 10:56 am โดย noppadonsk
วิธีการเลือกงาน
โดย jataz2 พ 12 ก.พ. 2020 9:47 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
60
พ 12 ก.พ. 2020 9:47 am โดย jataz2
วิธีการไปสัมภาษณ์งาน
โดย jataz2 พ 12 ก.พ. 2020 9:25 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
57
พ 12 ก.พ. 2020 9:25 am โดย jataz2
วิธีการ insert ข้อมูลในขั้นตอนติดตั้ง Extension phpbb
โดย Ittichai_chupol อ 11 ก.พ. 2020 5:55 pm บอร์ด PHP Knowledge
1
83
อ 11 ก.พ. 2020 6:01 pm โดย thatsawan
visual studio 2008 crystal reports viewer มี ในToolbox แต่ใช้งานไม่ได้
โดย d.direk อ 11 ก.พ. 2020 2:33 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
0
91
อ 11 ก.พ. 2020 2:33 pm โดย d.direk
การเดินทางจากปลวกแดง (ระยอง)- กรุงเทพฯ
โดย panudda อ 11 ก.พ. 2020 12:07 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
49
อ 11 ก.พ. 2020 12:07 pm โดย panudda
จะหยามกันเกินไปแล้ว
โดย noppadonsk อ 11 ก.พ. 2020 11:19 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
57
อ 11 ก.พ. 2020 11:19 am โดย noppadonsk