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

 

     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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
วิธีการเพิ่ม BBcode
โดย จันนุสรณ์ ดีแก่ อ 11 ธ.ค. 2018 5:10 pm บอร์ด phpBB 3.1 Extension Review
0
8
อ 11 ธ.ค. 2018 5:10 pm โดย จันนุสรณ์ ดีแก่
วิธีใช้บันทึกข้อความร่าง
โดย จันนุสรณ์ ดีแก่ อ 11 ธ.ค. 2018 2:01 pm บอร์ด phpBB user Guide Knowledge
0
10
อ 11 ธ.ค. 2018 2:01 pm โดย จันนุสรณ์ ดีแก่
ฺBBcode ที่น่าสนใจ
โดย Ittichai_chupol อ 11 ธ.ค. 2018 11:40 am บอร์ด phpBB user Guide Knowledge
1
12
อ 11 ธ.ค. 2018 12:23 pm โดย mindphp
เมื่อเครียดจนอยากร้องเพลง
โดย จันนุสรณ์ ดีแก่ อ 11 ธ.ค. 2018 10:20 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
12
อ 11 ธ.ค. 2018 10:20 am โดย จันนุสรณ์ ดีแก่
วิธีการสร้าง pop-up เพื่อ drag and drop multi image upload บน phpbb
โดย Ittichai_chupol ส 08 ธ.ค. 2018 4:30 pm บอร์ด Programming - PHP
0
33
ส 08 ธ.ค. 2018 4:30 pm โดย Ittichai_chupol
วิธีติดตั้งโปรแกรม Foxit Reader บนระบบปฏิบัติการ Ubuntu 16.04 LTS
โดย tatiya ส 08 ธ.ค. 2018 11:11 am บอร์ด Linux - Web Server
0
21
ส 08 ธ.ค. 2018 11:11 am โดย tatiya
อยากหมดหนี้ฟังทางนี้ ขอโชค ขอลาภกับพระเจ้าตากสิน
โดย Anonymous ศ 07 ธ.ค. 2018 4:40 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
29
ศ 07 ธ.ค. 2018 4:40 pm โดย บุคคลทั่วไป
Extension คืออะไร
โดย จันนุสรณ์ ดีแก่ ศ 07 ธ.ค. 2018 2:58 pm บอร์ด phpBB 3.1 Extension Review
0
25
ศ 07 ธ.ค. 2018 2:58 pm โดย จันนุสรณ์ ดีแก่
วิธีตั้งกระทู้ในเว็บบอร์ด phpBB โพสข้อความ รูปภาพ อัพโหลด ใช้ BBcode
โดย จันนุสรณ์ ดีแก่ ศ 07 ธ.ค. 2018 2:53 pm บอร์ด phpBB user Guide Knowledge
0
40
ศ 07 ธ.ค. 2018 2:53 pm โดย จันนุสรณ์ ดีแก่
Q - Event phpbb ที่แสดงผลตำแหน่ง หัวข้อกระทู้
โดย Ittichai_chupol ศ 07 ธ.ค. 2018 10:43 am บอร์ด Programming - PHP
3
23
ศ 07 ธ.ค. 2018 11:18 am โดย mindphp
ว่าด้วยเรื่องเว็บไซต์
โดย จันนุสรณ์ ดีแก่ ศ 07 ธ.ค. 2018 10:27 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
24
ศ 07 ธ.ค. 2018 10:27 am โดย จันนุสรณ์ ดีแก่
ราศีใด ระวังไฟไหม้บ้าน มีวิญญาณตามติด
โดย Anonymous พฤ 06 ธ.ค. 2018 8:41 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
31
พฤ 06 ธ.ค. 2018 8:41 pm โดย บุคคลทั่วไป
การส่งข้อความ และการเปิดอ่านข้อความ
โดย จันนุสรณ์ ดีแก่ พฤ 06 ธ.ค. 2018 2:27 pm บอร์ด phpBB user Guide Knowledge
0
30
พฤ 06 ธ.ค. 2018 2:27 pm โดย จันนุสรณ์ ดีแก่
HOW TO ออกจากเกมส์
โดย จันนุสรณ์ ดีแก่ พฤ 06 ธ.ค. 2018 11:32 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
30
พฤ 06 ธ.ค. 2018 11:32 am โดย จันนุสรณ์ ดีแก่
Q - ตรวจสอบ ไฟล์รูปภาพในกระทู้ phpbb
โดย Ittichai_chupol พฤ 06 ธ.ค. 2018 11:04 am บอร์ด Programming - PHP
1
31
พฤ 06 ธ.ค. 2018 5:06 pm โดย mindphp
สอบถามเกี่ยวกับการตรวจสอบขนาดของ File หลังจากเพิ่มฟอร์มหน่อยครับ
โดย tomsmile05 พฤ 06 ธ.ค. 2018 10:40 am บอร์ด Programming - PHP
1
30
พฤ 06 ธ.ค. 2018 11:19 am โดย tsukasaz
สาเหตุที่นอนไม่หลับ เป็นเพราะแบบนี้หรือเปล่า เช็คก่อนเกิดอันตราย!
โดย gotoblack พฤ 06 ธ.ค. 2018 8:44 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
24
พฤ 06 ธ.ค. 2018 8:44 am โดย gotoblack
ฟังก์ชั่นอีเมลล์ใช้ไม่ได้บน Joomla 4 alpha 3 มีวิธีแก้อย่างไรบ้างค่ะ
โดย pprn พ 05 ธ.ค. 2018 4:32 pm บอร์ด Joomla Development
0
27
พ 05 ธ.ค. 2018 4:32 pm โดย pprn
เช็คดวงราศีเกิด ประจำเดือนธันวาคม 2561
โดย Anonymous อ 04 ธ.ค. 2018 8:34 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
68
อ 04 ธ.ค. 2018 8:34 pm โดย บุคคลทั่วไป
การใช้งาน PM ถ้าคนอ่านยังไม่ได้อ่าน คนส่งสามารถแก้ไขได้
โดย จันนุสรณ์ ดีแก่ อ 04 ธ.ค. 2018 7:21 pm บอร์ด phpBB user Guide Knowledge
0
38
อ 04 ธ.ค. 2018 7:21 pm โดย จันนุสรณ์ ดีแก่