ให้เรตสมาชิก: 2 / 5

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

 

     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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
ขอวิธีเช็คเว็บไซด์ที่มาจาก Google 10 หน้าแรกหน่อยค่ะ
โดย Kannaphat ส 27 ก.พ. 2021 4:59 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
0
20
ส 27 ก.พ. 2021 4:59 pm โดย Kannaphat
Review เว็บไซต์ หางานที่ต่างๆ
โดย fighthrmd125 ส 27 ก.พ. 2021 3:13 pm บอร์ด Share Knowledge
0
17
ส 27 ก.พ. 2021 3:13 pm โดย fighthrmd125
PDPA กับงาน HR ของบริษัท
โดย fighthrmd125 ส 27 ก.พ. 2021 1:48 pm บอร์ด Share Knowledge
0
19
ส 27 ก.พ. 2021 1:48 pm โดย fighthrmd125
ประโยชน์ของ การใช้ Skype และ Web board ในการทำงาน
โดย fighthrmd125 ส 27 ก.พ. 2021 12:23 pm บอร์ด Share Knowledge
0
17
ส 27 ก.พ. 2021 12:23 pm โดย fighthrmd125
การจ้างงานผู้พิการ
โดย fighthrmd125 พฤ 25 ก.พ. 2021 5:53 pm บอร์ด Share Knowledge
0
18
พฤ 25 ก.พ. 2021 5:53 pm โดย fighthrmd125
แนวทางการสรรหา ช่องทาง สรรหาผู้พิการเข้าทำงาน
โดย fighthrmd125 พฤ 25 ก.พ. 2021 5:12 pm บอร์ด Share Knowledge
0
13
พฤ 25 ก.พ. 2021 5:12 pm โดย fighthrmd125
Google Structured ส่วนการ vote ในบทความจะดึงข้อมูลมาจากไหนค่ะ
โดย eange08 พฤ 25 ก.พ. 2021 5:04 pm บอร์ด Joomla Development
1
17
พฤ 25 ก.พ. 2021 5:34 pm โดย eange08
B - ระบบ LINE API ไม่ตอบพบข้อมูล [2021-02][001]
โดย tsukasaz พฤ 25 ก.พ. 2021 3:35 pm บอร์ด MlineCRM Line + MD-CRM
2
7
จ 01 มี.ค. 2021 11:23 am โดย tsukasaz