บทบาทของ CSS position: sticky

สร้าง Sticky Navbar ด้วย position: sticky

ใช้ position: sticky บน <ul> พร้อม top: 0 เพื่อทำแถบนำทางติดขอบบนเมื่อเลื่อนลง

ตัวอย่าง

<!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>Adding demo text to check fixed menu.</p> (ซ้ำหลายบรรทัด)
  </div>
</body>
</html>