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

 

     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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
VDO - แนะนำฟังก์ชั่นระบบ Webboard Mindphp.com ใหม่ (phpbb v.3.2)
โดย numtan5839 พ 20 พ.ย. 2019 6:31 pm บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
0
9
พ 20 พ.ย. 2019 6:31 pm โดย numtan5839
วิธีการเขียน SQL เพื่ม เพิ่มคอลัมน์ ฐานข้อมูล
โดย Ittichai_chupol พ 20 พ.ย. 2019 6:06 pm บอร์ด SQL Knowledge
0
8
พ 20 พ.ย. 2019 6:06 pm โดย Ittichai_chupol
VDO - Program Exchange Rate
โดย numtan5839 อ 12 พ.ย. 2019 2:42 pm บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
4
72
พฤ 21 พ.ย. 2019 5:12 pm โดย numtan5839
วิธีเช็คเวอร์ชั่น ของ Joomla
โดย bankjittapol พ 20 พ.ย. 2019 5:39 pm บอร์ด Joomla Developing Knowledge
0
16
พ 20 พ.ย. 2019 5:39 pm โดย bankjittapol
G - ข้อมูลสำหรับทำระบบ สรุปความต้องการ / ประชุมกับลูกค้า- ThaiVI
โดย mindphp พ 10 ต.ค. 2018 3:29 am บอร์ด ThaiVI (Main)
10
129
พ 20 พ.ย. 2019 4:15 pm โดย thatsawan
การปรับเปลี่ยนข้อมูลของ object โดยใช้ javascript
โดย Ittichai_chupol พ 20 พ.ย. 2019 3:34 pm บอร์ด Jquery & Ajax Knowledge
0
11
พ 20 พ.ย. 2019 3:34 pm โดย Ittichai_chupol
ค้นหาแบบนี้ ใช้ส่วนเสริมตัวไหนครับ
โดย toonytoony2004 อ 19 พ.ย. 2019 8:25 pm บอร์ด Joomla Development
2
24
พ 20 พ.ย. 2019 1:12 pm โดย mindphp
ระหว่าง joomla กับ wordpress แตกต่างกันยังไงครับ
โดย aloha11x พ 13 พ.ย. 2019 2:12 pm บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS, CRM
1
70
พ 20 พ.ย. 2019 1:10 pm โดย mindphp
จะทำยังไงถึงจะแปลงวันที่ ให้อยู่ในรูปแบบของ universal date format ครับ
โดย bankjittapol พ 20 พ.ย. 2019 10:44 am บอร์ด Joomla Development
2
25
พ 20 พ.ย. 2019 6:24 pm โดย bankjittapol
งานประจำวันที่ 20 พฤศจิกายน 2562
โดย numtan5839 พ 20 พ.ย. 2019 10:10 am บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
4
32
พฤ 21 พ.ย. 2019 2:09 pm โดย numtan5839
list box เพื่อเลือกจังหวัดที่ต้องการให้แสดงผลพยากรณ์อากาศ
โดย bankjittapol อ 19 พ.ย. 2019 7:12 pm บอร์ด Joomla Developing Knowledge
0
18
อ 19 พ.ย. 2019 7:12 pm โดย bankjittapol
justify-content: space-between คำสั่ง flex ที่จะช่วยให้ระยะห่างแต่ละรูปเท่ากัน
โดย jamepiyawat อ 19 พ.ย. 2019 6:13 pm บอร์ด CSS Knowledge
0
7
อ 19 พ.ย. 2019 6:13 pm โดย jamepiyawat
วิธีการสร้าง form เมื่อกดปุ่ม โดยใช้ javascript
โดย Ittichai_chupol อ 19 พ.ย. 2019 6:09 pm บอร์ด Jquery & Ajax Knowledge
0
15
อ 19 พ.ย. 2019 6:09 pm โดย Ittichai_chupol
Introducing the new Mindphp.com Webboard system function (phpbb v.3.2)
โดย numtan5839 อ 19 พ.ย. 2019 6:06 pm บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
0
7
อ 19 พ.ย. 2019 6:06 pm โดย numtan5839
อยากทราบวิธีการ Link ปุ่ม
โดย numtan5839 อ 19 พ.ย. 2019 5:06 pm บอร์ด MindPHP News / Feedback
2
30
อ 19 พ.ย. 2019 5:50 pm โดย numtan5839
อยากทราบวิธีการปรับเปลี่ยนค่า ตัวแปร array ใน javascript
โดย Ittichai_chupol อ 19 พ.ย. 2019 5:19 pm บอร์ด JavaScript & Jquery Ajax
4
20
อ 19 พ.ย. 2019 6:02 pm โดย jamepiyawat
report ปัญหา รูปโปรไฟล์หาย
โดย chatee supasand พ 13 พ.ย. 2019 12:46 pm บอร์ด MindPHP News / Feedback
1
42
อ 19 พ.ย. 2019 11:18 am โดย thatsawan
report ปัญหา ไม่มีแจ้งเตือนเวลามีคนตอบกระทู้ของเรา
โดย chatee supasand พ 13 พ.ย. 2019 1:05 pm บอร์ด MindPHP News / Feedback
2
46
อ 19 พ.ย. 2019 11:16 am โดย thatsawan
อยากทราบวิธีการจัดรูปแบบ css ให้เรียงอยู่ใน บรรทัดเดียวตลอด ทั้งตอนย่อ หรือ ตอนเต็มจอ
โดย Ittichai_chupol อ 19 พ.ย. 2019 10:53 am บอร์ด HTML CSS
0
13
อ 19 พ.ย. 2019 10:53 am โดย Ittichai_chupol
งานประจำวันที่ 19 พฤศจิกายน 2562
โดย numtan5839 อ 19 พ.ย. 2019 10:19 am บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
3
17
อ 19 พ.ย. 2019 7:17 pm โดย numtan5839