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

 

          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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
การใช้ text-align เพื่อจัดข้อความ
โดย bankjittapol ศ 22 พ.ย. 2019 6:28 pm บอร์ด CSS Knowledge
0
3
ศ 22 พ.ย. 2019 6:28 pm โดย bankjittapol
อยากทราบคำสั่ง joomla ที่จะทำให้ย่อยรูปได้ครับ
โดย jamepiyawat ศ 22 พ.ย. 2019 5:53 pm บอร์ด Joomla Development
0
5
ศ 22 พ.ย. 2019 5:53 pm โดย jamepiyawat
วิธีการการใช้งาน jquery เพื่อปรับเปลี่ยนค่า css ให้กับปุ่มเมื่อมีการคลิก
โดย Ittichai_chupol ศ 22 พ.ย. 2019 5:41 pm บอร์ด Jquery & Ajax Knowledge
0
3
ศ 22 พ.ย. 2019 5:41 pm โดย Ittichai_chupol
การใส่ Intro Outro และการตัดต่อ VDO ด้วยโปรแกรม โปรแกรม Sony Vagas Pro
โดย numtan5839 ศ 15 พ.ย. 2019 1:41 pm บอร์ด Graphic design
0
6
ศ 15 พ.ย. 2019 1:41 pm โดย numtan5839
ข้อดีข้อเสียของ SAP
โดย kanchanok พฤ 05 เม.ย. 2018 9:31 am บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
1
2220
ศ 22 พ.ย. 2019 4:57 pm โดย mindphp
วิธีการเปลี่ยนการแสดงผล ส่วนการจัดการกระทู้ที่ติดตาม ของ phpbb
โดย Ittichai_chupol ศ 22 พ.ย. 2019 4:07 pm บอร์ด PHP Knowledge
0
5
ศ 22 พ.ย. 2019 4:07 pm โดย Ittichai_chupol
.net ถ้าจะใช้ Entity Framework โดยไม่ต้องลงตัว Oracle Data Access Client (ODAC)
โดย jataz2 ศ 22 พ.ย. 2019 3:23 pm บอร์ด Programming - C/C++ & java & Python
0
9
ศ 22 พ.ย. 2019 3:23 pm โดย jataz2
โปรแกรมหาค่าเฉลี่ย, ค่าแปรปรวน และค่าเบี่ยงเบนมาตรฐาน
โดย prmindphp ศ 22 พ.ย. 2019 10:40 am บอร์ด MindPHP News / Feedback
0
17
ศ 22 พ.ย. 2019 10:40 am โดย prmindphp
โปรแกรมคำนวณสแควรูท - โปรแกรมช่วยหาค่า รากที่ สอง สาม สี่... ของจำนวนที่ต้องการ
โดย prmindphp ศ 22 พ.ย. 2019 10:23 am บอร์ด MindPHP News / Feedback
0
37
ศ 22 พ.ย. 2019 10:23 am โดย prmindphp
พาสปอร์ตด่วนพิเศษ บินไวไฟลุก จ่าย 3,000.- รับเล่มภายในไม่กี่ชั่วโมง
โดย promotion ศ 22 พ.ย. 2019 10:19 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
8
ศ 22 พ.ย. 2019 10:19 am โดย promotion
งานประจำวันที่ 22 พฤศจิกายน 2562
โดย numtan5839 ศ 22 พ.ย. 2019 9:36 am บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
6
24
ศ 22 พ.ย. 2019 6:58 pm โดย numtan5839
บันทึกการประชุม OpenERP MD-ERP
โดย rinrada ส 04 ก.พ. 2017 11:52 am บอร์ด OpenERP - MD-ERP (Main)
26
173
พฤ 21 พ.ย. 2019 6:56 pm โดย thatsawan
การใช้ ฟังก์ชัน hsl() และ hsal () กำหนดค่าของสี
โดย bankjittapol พฤ 21 พ.ย. 2019 6:55 pm บอร์ด CSS Knowledge
0
24
พฤ 21 พ.ย. 2019 6:55 pm โดย bankjittapol
วิธีการแยกตัวอักษรเข้าอาร์เรย์ (Array) แต่ล่ะอาร์เรย์ ด้วยคำสั่ง split
โดย jamepiyawat พฤ 21 พ.ย. 2019 6:50 pm บอร์ด Jquery & Ajax Knowledge
0
20
พฤ 21 พ.ย. 2019 6:50 pm โดย jamepiyawat
วิธีการดึงค่าเฉพาะค่าสุดท้ายของ class แม้ว่าจะมี class ชื่อเหมือนกัน หลายคลาส โดย javascript
โดย Ittichai_chupol พฤ 21 พ.ย. 2019 6:39 pm บอร์ด Jquery & Ajax Knowledge
0
27
พฤ 21 พ.ย. 2019 6:39 pm โดย Ittichai_chupol
การติดตั้ง wkhtmltopdf ด้วย terminal บน ubuntu
โดย jirawoot พฤ 27 มิ.ย. 2019 4:00 pm บอร์ด Linux - Web Server
3
719
พฤ 21 พ.ย. 2019 2:49 pm โดย mindphp
การปรับแก้ไข(Overrides) Modules ใน Template
โดย bankjittapol พฤ 21 พ.ย. 2019 2:36 pm บอร์ด Joomla Developing Knowledge
0
19
พฤ 21 พ.ย. 2019 2:36 pm โดย bankjittapol
wkhmtltopdf คืออะไร
โดย jirawoot พ 03 ก.ค. 2019 6:35 pm บอร์ด Share Knowledge
1
229
พฤ 21 พ.ย. 2019 2:34 pm โดย mindphp
อัพเกรด wkhtmltopdf บน Ubuntu 16.04
โดย mindphp พฤ 21 พ.ย. 2019 2:33 pm บอร์ด Linux - Web Server
0
18
พฤ 21 พ.ย. 2019 2:33 pm โดย mindphp
VDO - โปรแกรมแปลงพื้นที่
โดย numtan5839 พฤ 21 พ.ย. 2019 1:59 pm บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
4
29
ศ 22 พ.ย. 2019 6:40 pm โดย numtan5839