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

 

     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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
การเก็บข้อมูลชั่วคราว(Cache) ใน Joomla
โดย bankjittapol พ 27 พ.ย. 2019 5:54 pm บอร์ด Joomla Developing Knowledge
0
24
พ 27 พ.ย. 2019 5:54 pm โดย bankjittapol
วิธีการเขียน SQL ลบคอลัมน์ออกจากตารางใน ฐานข้อมูล
โดย Ittichai_chupol พ 27 พ.ย. 2019 5:44 pm บอร์ด SQL Knowledge
0
27
พ 27 พ.ย. 2019 5:44 pm โดย Ittichai_chupol
VDO - Sport Lineup Program
โดย numtan5839 พ 27 พ.ย. 2019 5:39 pm บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
0
4
พ 27 พ.ย. 2019 5:39 pm โดย numtan5839
Excel เพิ่มฟีเจอร์ Sheet View ใช้งานร่วมกันหลายๆคนได้แบบไม่มีปัญหา
โดย chatee supasand พ 27 พ.ย. 2019 4:37 pm บอร์ด Microsoft Office Knowledge & line & Etc
0
20
พ 27 พ.ย. 2019 4:37 pm โดย chatee supasand
วิธีการใช้งาน JQuery กับ Ajax เพื่อค้นหาข้อมูลจากฐานข้อมูลว่ามมีจริงหรือไม
โดย Ittichai_chupol พ 27 พ.ย. 2019 2:28 pm บอร์ด Jquery & Ajax Knowledge
0
35
พ 27 พ.ย. 2019 2:28 pm โดย Ittichai_chupol
GENNECT Cross คืออะไร?
โดย LEG พ 27 พ.ย. 2019 1:28 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
24
พ 27 พ.ย. 2019 1:28 pm โดย LEG
จะกำหนด icon เฉพาะ ข้อความใน tag new ได้ยังไงครับ
โดย bankjittapol พ 27 พ.ย. 2019 12:20 pm บอร์ด Joomla Development
2
39
ส 30 พ.ย. 2019 1:36 pm โดย bankjittapol
B - ปัญหา login ผ่าน xmlrpc แล้ว Error Connect error: Connection timed out (110)
โดย tsukasaz พ 27 พ.ย. 2019 10:10 am บอร์ด MlineCRM Line + MD-CRM
5
9
พ 27 พ.ย. 2019 5:12 pm โดย mindphp
งานประจำวันที่ 27 พฤศจิกายน 2562
โดย numtan5839 พ 27 พ.ย. 2019 10:11 am บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
4
33
พ 27 พ.ย. 2019 7:04 pm โดย jamepiyawat
พรีฯของจากจีนมาขาย สั่งเองไม่ยาก ไม่เก่งภาษาจีนก็ทำได้!
โดย promotion ศ 08 พ.ย. 2019 3:06 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
2
118
พ 27 พ.ย. 2019 9:22 am โดย LEG
ทำความรู้จักกับ Forex ตลาดแลกเปลี่ยนเงินตราต่างประเทศ
โดย numtan5839 ศ 08 พ.ย. 2019 4:03 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
1
149
พ 27 พ.ย. 2019 5:26 am โดย npfurion
ขอวิธีสร้าง Dropdown list จังหวัด อำเภอ ตำบล เพียงใส
โดย spawat ส 02 พ.ย. 2019 4:49 pm บอร์ด Programming - PHP
4
217
พฤ 28 พ.ย. 2019 10:49 am โดย ololl04
VDO - โปรแกรมจัดรูปแบบแผนการเล่นฟุตบอล
โดย numtan5839 อ 26 พ.ย. 2019 6:04 pm บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
2
16
อ 26 พ.ย. 2019 6:19 pm โดย numtan5839
โปรแกรมแปลงพื้นที่
โดย prmindphp อ 26 พ.ย. 2019 5:20 pm บอร์ด MindPHP News & Feedback
0
36
อ 26 พ.ย. 2019 5:20 pm โดย prmindphp
เชื่อม template engine twig แล้ว error ครับ
โดย jamepiyawat อ 26 พ.ย. 2019 1:45 pm บอร์ด Programming - PHP
2
41
อ 26 พ.ย. 2019 2:42 pm โดย jamepiyawat
ภาษาซี (C/C++) กับ โจทย์ทางคณิตศาสตร์ (2) แปลงฟุต&นิ้ว เป็น เซนติเมตร
โดย Aussadawut จ 19 พ.ย. 2018 2:57 pm บอร์ด Share Knowledge
1
2628
อ 26 พ.ย. 2019 12:24 pm โดย mindphp
งานประจำวันที่ 26 พฤศจิกายน 2562
โดย numtan5839 อ 26 พ.ย. 2019 10:22 am บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
2
12
อ 26 พ.ย. 2019 7:39 pm โดย numtan5839
ระวังไว้! 'โรคเอ็มเอส' โรคใหม่วัยทำงาน
โดย promotion พฤ 31 ต.ค. 2019 3:00 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
1
183
อ 26 พ.ย. 2019 4:04 am โดย weeha
การปรับแก้ไขข้อมูลเมื่อทำการ Quote เพื่อปรับแก้ไขชื่อของ User ที่ทำการ Quote ใน phpbb
โดย Ittichai_chupol จ 25 พ.ย. 2019 6:39 pm บอร์ด PHP Knowledge
0
34
จ 25 พ.ย. 2019 6:39 pm โดย Ittichai_chupol
dapper line ช่วยตรวจสอบให้ด้วยว่าเกิดอะไรขึ้น
โดย thatsawan จ 25 พ.ย. 2019 6:29 pm บอร์ด MD-CRM - Tester
3
10
ศ 06 ธ.ค. 2019 4:04 pm โดย thatsawan