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

 

          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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
เรียกให้ดูหรูหรา
โดย noppadonsk พฤ 05 มี.ค. 2020 6:31 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
200
พฤ 05 มี.ค. 2020 6:31 pm โดย noppadonsk
ประสบการณ์เรื่องที่พัก เสียเงินค่าเช่าไปวันๆ
โดย jataz2 พฤ 05 มี.ค. 2020 5:52 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
161
พฤ 05 มี.ค. 2020 5:52 pm โดย jataz2
เรียกใช้งาน pip ใน python 3.7 บน ubuntu ไม่ได้ครับ
โดย chatee supasand พฤ 05 มี.ค. 2020 10:49 am บอร์ด Programming - C/C++ & java & Python
1
700
พฤ 05 มี.ค. 2020 11:41 am โดย mindphp
สอบถามเรื่องพัฒนาเว็บไซต์โดยใช้ PHP ช่วยเข้ามาตอบหรืออธิบายขั้นตอนการทำงานให้ฟังหน่อยได้ไหมครับตอนนี้ไปไม่ถูกแล้ว
โดย gangger00 อ 03 มี.ค. 2020 1:03 pm บอร์ด Programming - PHP
0
185
อ 03 มี.ค. 2020 1:03 pm โดย gangger00
แก้ปัญหา gnutls_handshake() failed: Decrypt error ติดตั้ง packet ใหม่บน Ubuntu 14
โดย mindphp จ 02 มี.ค. 2020 5:05 pm บอร์ด Linux - Web Server
0
376
จ 02 มี.ค. 2020 5:05 pm โดย mindphp
การแก้ปัญหาไวรัส
โดย noppadonsk จ 02 มี.ค. 2020 4:42 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
183
จ 02 มี.ค. 2020 4:42 pm โดย noppadonsk
สอบถาม อยากไม่ให้หน้ากระดาษแบ่งหน้าต้องทำอย่างไรครับ ใน wkhtmltopdf
โดย jirawoot จ 02 มี.ค. 2020 11:56 am บอร์ด Programming - C/C++ & java & Python
2
1170
พ 04 มี.ค. 2020 10:24 am โดย jirawoot
วิธีการสร้างนึกค่า value มาจาก input โดยใช้ javascript ในกรณีที่ไม่มี class กับ id
โดย Ittichai_chupol ศ 28 ก.พ. 2020 4:40 pm บอร์ด Jquery & Ajax Knowledge
0
1173
ศ 28 ก.พ. 2020 4:40 pm โดย Ittichai_chupol
รีวิวเปรียบเทียบ เครื่องปริ้นเล็ก Printer Slip Better BT5890T Vs Printer Slip VENUS PRT-058
โดย chatee supasand ศ 28 ก.พ. 2020 4:20 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
1306
ศ 28 ก.พ. 2020 4:20 pm โดย chatee supasand
แกกล้าดียังไง
โดย noppadonsk ศ 28 ก.พ. 2020 10:06 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
252
ศ 28 ก.พ. 2020 10:06 am โดย noppadonsk
ข้อดีของ เว็บบอร์ด คือจับตัว IO ได้ง่าย
โดย mindphp พฤ 27 ก.พ. 2020 8:12 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
278
พฤ 27 ก.พ. 2020 8:12 pm โดย mindphp
อยากทราบวิธีการแก้ไขปัญหา Uncaught TypeError: Cannot read property '0' of undefined ใน javascript
โดย Ittichai_chupol พฤ 27 ก.พ. 2020 8:04 pm บอร์ด Programming - PHP
2
608
ศ 06 มี.ค. 2020 4:18 pm โดย tanvishah
การเขียนโค้ดมีความเสี่ยง
โดย noppadonsk พฤ 27 ก.พ. 2020 6:19 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
222
พฤ 27 ก.พ. 2020 6:19 pm โดย noppadonsk
อยากทราบวิธีการ import ชนิดข้อมูลที่เป็น date ใน Excel มาเป็น text เพื่อบันทึกลงในฐานข้อมูล
โดย Ittichai_chupol พฤ 27 ก.พ. 2020 2:55 pm บอร์ด Programming - PHP
1
256
พฤ 27 ก.พ. 2020 2:57 pm โดย thatsawan
สอบถามครับ จะรันไฟล์ .exe บน Ubuntu ต้องใช้โปรแกรมไหนได้บ้างครับ
โดย chatee supasand พฤ 27 ก.พ. 2020 2:18 pm บอร์ด Programming - C/C++ & java & Python
0
182
พฤ 27 ก.พ. 2020 2:18 pm โดย chatee supasand
สอบถามครับ รันไฟล์ .exe บน Ubuntu ด้วย Wine แล้ว error
โดย chatee supasand พฤ 27 ก.พ. 2020 1:41 pm บอร์ด Programming - C/C++ & java & Python
0
205
พฤ 27 ก.พ. 2020 1:41 pm โดย chatee supasand
เบราว์เซอร์ firefox ไม่แสดงเส้น border ครับ
โดย waterwelon พ 26 ก.พ. 2020 3:39 pm บอร์ด HTML CSS
0
334
พ 26 ก.พ. 2020 3:39 pm โดย waterwelon
ทำแม้กระทั่งตอนนอน
โดย noppadonsk พ 26 ก.พ. 2020 2:48 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
136
พ 26 ก.พ. 2020 2:48 pm โดย noppadonsk
อยากทราบวิธีตรวจสอบว่าอาเรย์ 2 ชุดมีค่าเหมือนกันหรือเปล่า ครับ
โดย waterwelon อ 25 ก.พ. 2020 3:32 pm บอร์ด Programming - PHP
0
253
อ 25 ก.พ. 2020 3:32 pm โดย waterwelon
ความแข็งแกร่ง
โดย noppadonsk อ 25 ก.พ. 2020 11:13 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
144
อ 25 ก.พ. 2020 11:13 am โดย noppadonsk