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

 

     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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
วิธีการสร้างหน้าเว็บให้หน่วงเวลาก่อนจะไปยังหน้าเว็บจริง ๆ ด้วยฟังชั่น header()
โดย jamepiyawat ศ 10 ม.ค. 2020 5:51 pm บอร์ด PHP Knowledge
0
97
ศ 10 ม.ค. 2020 5:51 pm โดย jamepiyawat
ช่วยอธิบาย Code การ zip file หน่อยครับ
โดย benzas00123 ศ 10 ม.ค. 2020 11:35 am บอร์ด Programming - C/C++ & java & Python
3
107
ศ 10 ม.ค. 2020 12:16 pm โดย benzas00123
จำลองรูปแบบแผนการเล่นฟุตบอลเพื่อใช้เป็นกลยุทธ์ในการเล่นด้วยโปรแกรมจัดรูปแบบแผนการเล่นฟุตบอล
โดย prmindphp พฤ 09 ม.ค. 2020 7:19 pm บอร์ด MindPHP News & Feedback
0
109
พฤ 09 ม.ค. 2020 7:19 pm โดย prmindphp
ช่วยหน่อยครับ รับค่าข้อมูลเพื่อบันทึกลงไปในฐานข้อมูลของ Postgres ไม่ได้ครับ
โดย benzas00123 พฤ 09 ม.ค. 2020 5:53 pm บอร์ด Programming - C/C++ & java & Python
0
68
พฤ 09 ม.ค. 2020 5:53 pm โดย benzas00123
การเชื่อต่อฐานข้อมูล Postgres ด้วย Module psycopg2
โดย benzas00123 พฤ 09 ม.ค. 2020 3:48 pm บอร์ด Python Knowledge
0
63
พฤ 09 ม.ค. 2020 3:48 pm โดย benzas00123
เชื่อมต่อกับ ฐานข้อมูลของ psycopg2 ไม่ได้ครับ
โดย benzas00123 พฤ 09 ม.ค. 2020 2:28 pm บอร์ด Programming - C/C++ & java & Python
1
55
พฤ 09 ม.ค. 2020 2:53 pm โดย benzas00123
ไม่สามารถติดตั้ง Module psycopg2 ใน pycharm ได้ครับ
โดย benzas00123 พฤ 09 ม.ค. 2020 1:30 pm บอร์ด Programming - C/C++ & java & Python
1
82
พฤ 09 ม.ค. 2020 1:42 pm โดย benzas00123
วิธีการเขียน คำสั่ง SQL เพื่อปรับเปลี่ยน type ของข้อมูลในฐานข้อมูล
โดย Ittichai_chupol พฤ 09 ม.ค. 2020 12:06 pm บอร์ด SQL Knowledge
0
104
พฤ 09 ม.ค. 2020 12:06 pm โดย Ittichai_chupol
835z5sw2
โดย Anonymous พฤ 09 ม.ค. 2020 6:55 am บอร์ด Graphic design
0
88
พฤ 09 ม.ค. 2020 6:55 am โดย บุคคลทั่วไป
How To Delete Google Homepage Without Affecting Browsing Experience?
โดย Anonymous พ 08 ม.ค. 2020 2:11 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
53
พ 08 ม.ค. 2020 2:11 pm โดย บุคคลทั่วไป
ปฏิทินประจําปี 2563 ธีมรูปแบบกีฬาและนันทนาการ
โดย noppadonsk พ 08 ม.ค. 2020 10:46 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
121
พ 08 ม.ค. 2020 10:46 am โดย noppadonsk
ฝึกการใช้ for loop ด้วยการหาค่าต่ำสุดและค่าสูงสุดในตัวแปร list
โดย benzas00123 อ 07 ม.ค. 2020 7:01 pm บอร์ด Python Knowledge
1
136
พ 08 ม.ค. 2020 3:27 pm โดย benzas00123
วิธีการ ปลด permission ไฟล์ที่อัพโหลดบน ubuntu ด้วยการ chmod folder 777 ใน phpbb
โดย Ittichai_chupol อ 07 ม.ค. 2020 5:50 pm บอร์ด PHP Knowledge
0
90
อ 07 ม.ค. 2020 5:50 pm โดย Ittichai_chupol
Microsoft เปิดให้ผู้ใช้ Windows 7 , 8 , 8.1 สามารถทำการอัพเกรดเป็น Windows 10 ได้ฟรี
โดย benzas00123 อ 07 ม.ค. 2020 5:34 pm บอร์ด Microsoft Office Knowledge & line & Etc
0
92
อ 07 ม.ค. 2020 5:34 pm โดย benzas00123
วิธีการปลดล็อคหน้าจอคอมพิวเตอร์ด้วยใบหน้า เพื่อเพิ่มความปลอดภัยของเครื่องคอมพิวเตอร์
โดย benzas00123 อ 07 ม.ค. 2020 4:41 pm บอร์ด Microsoft Office Knowledge & line & Etc
0
114
อ 07 ม.ค. 2020 4:41 pm โดย benzas00123
คำค้นหาประจำปี 2019 ในประเทศไทย จาก Google
โดย chatee supasand อ 07 ม.ค. 2020 4:36 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
1
81
อ 14 ม.ค. 2020 3:30 pm โดย LEG
วิธีการปิดเครื่องแบบ Slide to shut down
โดย benzas00123 อ 07 ม.ค. 2020 3:57 pm บอร์ด Microsoft Office Knowledge & line & Etc
0
75
อ 07 ม.ค. 2020 3:57 pm โดย benzas00123
ปฏิทินประจําปี 2563 ธีมรูปแบบผู้หญิง สีชมพูสวยสดใส
โดย noppadonsk อ 07 ม.ค. 2020 3:29 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
108
อ 07 ม.ค. 2020 3:29 pm โดย noppadonsk
วิธีการ Reset Windows 10 ให้กลับมาเหมือนตอนเพิ่งจะลง Windows ใหม่ๆ
โดย benzas00123 อ 07 ม.ค. 2020 2:44 pm บอร์ด Microsoft Office Knowledge & line & Etc
0
91
อ 07 ม.ค. 2020 2:44 pm โดย benzas00123
อยากทราบวิธีการ ที่จะทำให้ ไฟล์ที่อัพโหลดมา ไม่ติด permission ใน ubuntu
โดย Ittichai_chupol อ 07 ม.ค. 2020 10:31 am บอร์ด Programming - PHP
3
88
อ 07 ม.ค. 2020 1:21 pm โดย mindphp