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

 

          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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
Google เปิดตัว CallJoy ผู้ช่วย AI สำหรับธุรกิจขนาดกลางและขนาดเล็ก
โดย jamepiyawat อ 20 ส.ค. 2019 6:26 pm บอร์ด Share Knowledge
0
1
อ 20 ส.ค. 2019 6:26 pm โดย jamepiyawat
รายละเอียดการขอหนังสือรับรองผลงานจากลูกค้า
โดย EyePornnipa อ 20 ส.ค. 2019 6:11 pm บอร์ด M089 - นางสาวพรนิภา ราชธานี
0
9
อ 20 ส.ค. 2019 6:11 pm โดย EyePornnipa
สอบถามการหมุนไฟล์ PDF ถาวรหน่อยค่ะ
โดย EyePornnipa อ 20 ส.ค. 2019 5:38 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
3
14
อ 20 ส.ค. 2019 5:59 pm โดย chatee supasand
Microsoft จอนำ Notepad ขึ้น store อัพเดตไม่ต้องร Windows อีกต่อไป
โดย chatee supasand อ 20 ส.ค. 2019 5:30 pm บอร์ด Microsoft Office Knowledge & line & Etc
0
2
อ 20 ส.ค. 2019 5:30 pm โดย chatee supasand
วิธีการปรับเปลี่ยนค่าเมื่อมีการ Quote โพสต์ ใน phpbb
โดย Ittichai_chupol อ 20 ส.ค. 2019 5:21 pm บอร์ด PHP Knowledge
0
1
อ 20 ส.ค. 2019 5:21 pm โดย Ittichai_chupol
วิธีการปรับเปลี่ยนค่า โฑสต์ เมื่อมีการ Quote ใน phpbb
โดย Ittichai_chupol อ 20 ส.ค. 2019 5:17 pm บอร์ด PHP Knowledge
0
0
อ 20 ส.ค. 2019 5:17 pm โดย Ittichai_chupol
งานประจำวันที่ 20 กรกฎาคม 2562
โดย jamepiyawat อ 20 ส.ค. 2019 10:09 am บอร์ด M084 - นายปิยวัช เชาว์วิมล
1
7
อ 20 ส.ค. 2019 10:19 am โดย jamepiyawat
งานประจำวันที่ 20 สิงหาคม 2562
โดย jirawoot อ 20 ส.ค. 2019 10:05 am บอร์ด M090 - นายจิระวุฒิ อัครลิขิตกุล
0
5
อ 20 ส.ค. 2019 10:05 am โดย jirawoot
งานประจำวันที่ 20 สิงหาคม 2562
โดย chatee supasand อ 20 ส.ค. 2019 9:58 am บอร์ด MT33 - นายชาตรี สุภาแสน
1
4
อ 20 ส.ค. 2019 7:09 pm โดย chatee supasand
งานประจำวันที่ 20 สิงหาคม 2562
โดย EyePornnipa อ 20 ส.ค. 2019 9:57 am บอร์ด M089 - นางสาวพรนิภา ราชธานี
1
10
อ 20 ส.ค. 2019 7:29 pm โดย EyePornnipa
ชีวิตนักเรียนออสเตรเลีย!!!
โดย aittit จ 19 ส.ค. 2019 9:07 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
8
จ 19 ส.ค. 2019 9:07 pm โดย aittit
งานประจำวันที่ 19 สิงหาคม 2562
โดย chatee supasand จ 19 ส.ค. 2019 10:03 am บอร์ด MT33 - นายชาตรี สุภาแสน
2
10
จ 19 ส.ค. 2019 7:51 pm โดย chatee supasand
google เปลี่ยนดีไซน์หน้าค้นหาใหม่ในสมาร์ทโฟนและแสดงไอคอนของเว็บไซต์ได้
โดย jamepiyawat จ 19 ส.ค. 2019 6:33 pm บอร์ด Share Knowledge
0
25
จ 19 ส.ค. 2019 6:33 pm โดย jamepiyawat
Windows 10 เตรียมอัพฟีเจอร์เช็คความร้อนของ GPU โดยไม่ต้องง้อโปรแกรมเสริมได้แล้วใน Build 18963
โดย chatee supasand จ 19 ส.ค. 2019 6:23 pm บอร์ด Microsoft Office Knowledge & line & Etc
0
18
จ 19 ส.ค. 2019 6:23 pm โดย chatee supasand
อยากทราบวิธีการคำนวนจำนวนบรรทัด ใน google sheet
โดย Ittichai_chupol จ 19 ส.ค. 2019 4:19 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
0
16
จ 19 ส.ค. 2019 4:19 pm โดย Ittichai_chupol
การเสนอราคาสมาคมสโมสรนักลงทุน
โดย EyePornnipa จ 19 ส.ค. 2019 2:59 pm บอร์ด M089 - นางสาวพรนิภา ราชธานี
1
19
อ 20 ส.ค. 2019 11:50 am โดย EyePornnipa
สอบถาม wkhtmltopdf ตอนแปลงไฟล์ pdf แล้ว graph ใน javascript ไม่มาด้วย มีวิธีแก้ไขไหมครับ
โดย jirawoot จ 19 ส.ค. 2019 2:53 pm บอร์ด Programming - C/C++ & java & Python
0
16
จ 19 ส.ค. 2019 2:53 pm โดย jirawoot
สอบถาม วิธีการนับเวลาในไฟล์วีดีโอครับ
โดย jirawoot จ 19 ส.ค. 2019 11:34 am บอร์ด Programming - C/C++ & java & Python
1
25
จ 19 ส.ค. 2019 5:07 pm โดย jirawoot
งานประจำวันที่ 19 สิงหาคม 2562
โดย EyePornnipa จ 19 ส.ค. 2019 10:15 am บอร์ด M089 - นางสาวพรนิภา ราชธานี
3
22
จ 19 ส.ค. 2019 7:33 pm โดย EyePornnipa
งานประจำวันที่ 19 กรกฎาคม 2562
โดย jamepiyawat จ 19 ส.ค. 2019 10:09 am บอร์ด M084 - นายปิยวัช เชาว์วิมล
1
5
จ 19 ส.ค. 2019 7:56 pm โดย jamepiyawat