เพื่อสร้าง Sticky Navbar (แถบนำทางที่ติดอยู่เมื่อเลื่อนจนถึงตำแหน่ง) ให้ใช้คุณสมบัติ position: sticky ร่วมกับ top: 0
ตัวอย่างโค้ด
ลองรันโค้ดด้านล่างเพื่อสร้าง Sticky Navbar:
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
position: sticky;
overflow: hidden;
top: 0;
width: 100%;
}
li {
float: left;
border-right: 1px solid white;
}
li a {
display: block;
padding: 8px;
background-color: orange;
}
li:last-child {
border-right: none;
}
div {
padding: 5px;
margin-top: 5px;
background-color: white;
height: 1000px;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<div>
<p>ข้อความทดสอบเพื่อตรวจสอบ sticky menu...</p>
<p>ข้อความทดสอบเพื่อตรวจสอบ sticky menu...</p>
<p>ข้อความทดสอบเพื่อตรวจสอบ sticky menu...</p>
<p>ข้อความทดสอบเพื่อตรวจสอบ sticky menu...</p>
<p>ข้อความทดสอบเพื่อตรวจสอบ sticky menu...</p>
<p>ข้อความทดสอบเพื่อตรวจสอบ sticky menu...</p>
<p>ข้อความทดสอบเพื่อตรวจสอบ sticky menu...</p>
<p>ข้อความทดสอบเพื่อตรวจสอบ sticky menu...</p>
<p>ข้อความทดสอบเพื่อตรวจสอบ sticky menu...</p>
<p>ข้อความทดสอบเพื่อตรวจสอบ sticky menu...</p>
<p>ข้อความทดสอบเพื่อตรวจสอบ sticky menu...</p>
<p>ข้อความทดสอบเพื่อตรวจสอบ sticky menu...</p>
</div>
</body>
</html>
ความแตกต่าง Fixed vs Sticky:
- Fixed: ติดอยู่ตำแหน่งเดิมตลอด (
position: fixed) - Sticky: เลื่อนตามปกติ จนถึง
top: 0แล้วค่อยติด (position: sticky)
Sticky ต้องมี parent container ที่มีความสูงเพียงพอ
