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

ดาวใช้งานดาวใช้งานดาวใช้งานดาวใช้งานดาวใช้งาน
 

 

          CSS ย่อมาจาก Cascading Style Sheet มักเรียกโดยย่อว่า “สไตล์ชีท” คือ ภาษาที่ใช้เป็นส่วนของการจัดรูปแบบการแสดงผลเอกสาร htmlโดยที่ CSS กำหนดกฎเกณฑ์ในการระบุรูปแบบ หรือ “Style” ของเนื้อหาในเอกสาร โดยบทความนี้จะกล่าวถึง การฟิคแถบ Navbar (เมนูบาร์ ซึ่งเป็นส่วนประกอบสำคัญบนเว็บไซด์ ในปัจจุบันอาจจะมีทั้ง jQuery หรือ JAVASCRIPT ที่มาช่วยให้เราสร้างเมนูบาร์ได้ง่ายขึ้น) โดยใช้ JavaScriptเข้ามาช่วย

 

รูปแบบโค้ด CSS 

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

 

รูปแบบโค้ด JavaScript

<script>

// เมื่อผู้ใช้เลื่อนหน้าเว็บจะรัน myFunction
window.onscroll = function() {myFunction()};

// Get the navbar
var navbar = document.getElementById("navbar");

// Get ตำแหน่งออฟเซตของ navbar
var sticky = navbar.offsetTop;


// เพิ่ม sticky ลงใน navbar เมื่อคุณไม่ได้เลื่อน "sticky" จะถูกลบออก
function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}
</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;
}


.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky + .content {
  padding-top: 60px;
}
</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 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 sticky = navbar.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}
</script>

</body>
</html>

 

ผลลัพธ์

 

เมื่อยังไม่ได้เลื่อน Scroll Down

 

เมื่อยังไม่ได้เลื่อน ScrollDown
เมื่อยังไม่ได้เลื่อน Scroll Down

 

เมื่อเลื่อน Scroll Down 

 

เมื่อเลื่อน Scroll Down ลงมา
เมื่อเลื่อน Scroll Down ลงมา

 

      จะเห็นได้ว่าเมื่อเลื่อนเมาส์แล้ว  Navbar  จะขยับไปตาม Scroll Down

 

ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : HTML css CodeIgniter Framework

mt25
, Tips CSS : การฟิคแถบ Navbar โดยใช้ JavaScript - by บทเรียน CSS,
5 1 1 5
กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
สอบถามวิธี render file mp4 kdenlive หน่อยครับ
โดย chakirin.bfds จ 08 มี.ค. 2021 6:06 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
0
3
จ 08 มี.ค. 2021 6:06 pm โดย chakirin.bfds
ขอวิธีลบหรือรีเซ็ตค่าข้อมูลในตารางหน่อยครับ
โดย chakirin.bfds จ 08 มี.ค. 2021 3:51 pm บอร์ด SQL - Database
4
12
จ 08 มี.ค. 2021 6:54 pm โดย chakirin.bfds
Q - สอบถามทำให้ mouse over ที่ไอคอนรูปวงกลม แล้วให้แสดงรูปที่เป็นข้อความขึ้น
โดย eange08 ศ 05 มี.ค. 2021 4:52 pm บอร์ด Joomla Dev
1
5
ศ 05 มี.ค. 2021 5:47 pm โดย tsukasaz
กลุ่มประเทศผู้ส่งออกข้าว
โดย jataz2 ศ 05 มี.ค. 2021 11:07 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
22
ศ 05 มี.ค. 2021 11:07 am โดย jataz2
Q - พอมี module หรือ plugin ที่เป็นพวก social อย่าง line, ig บ้างไหมค่ะ
โดย eange08 พฤ 04 มี.ค. 2021 5:21 pm บอร์ด Joomla Dev
1
7
พฤ 04 มี.ค. 2021 5:26 pm โดย tsukasaz
reboot เครื่องไม่ได้ครับ
โดย chakirin.bfds พฤ 04 มี.ค. 2021 12:25 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
2
48
พฤ 04 มี.ค. 2021 3:14 pm โดย chakirin.bfds
แก้ css ส่วน padding ด้วย override แล้วไม่เปลี่ยนตาม
โดย eange08 พ 03 มี.ค. 2021 4:43 pm บอร์ด Joomla Development
1
33
พ 03 มี.ค. 2021 4:47 pm โดย tsukasaz
Joomla PDPA ใช้ EB Sticky Cookie Notice โมดูล แสดงแจ้งเตือนการเก็บข้อมูล Cookie ของผู้ใช้งาน
โดย tsukasaz พ 03 มี.ค. 2021 4:39 pm บอร์ด Joomla Extension Review
0
30
พ 03 มี.ค. 2021 4:39 pm โดย tsukasaz