Vai trò position: sticky trong CSS

Tạo navbar dính (sticky navbar) với position: sticky

position: sticky cho phép phần tử dính ở vị trí khi cuộn chạm ngưỡng. Dùng cho navbar, sidebar, header bảng.

Ví dụ: Sticky Navbar

<!DOCTYPE html>
<html>
<head>
  <style>
    ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      position: sticky;
      top: 0; /* Dính tại đỉnh viewport */
      overflow: hidden;
      width: 100%;
      background: white; /* Nền trắng che nội dung cuộn qua */
      z-index: 1000;
      display: flex;
    }
    li {
      border-right: 1px solid white;
    }
    li a {
      display: block;
      padding: 12px 20px;
      background-color: orange;
      color: white;
      text-decoration: none;
    }
    li:last-child { border-right: none; }
    div.content {
      padding: 20px;
      height: 2000px; /* Tạo độ dài cuộn */
    }
  </style>
</head>
<body>
  <ul>
    <li><a href="#home">Trang chủ</a></li>
    <li><a href="#news">Tin tức</a></li>
    <li><a href="#contact">Liên hệ</a></li>
    <li><a href="#about">Giới thiệu</a></li>
  </ul>
  <div class="content">
    <p>Nội dung dài... Cuộn xuống để thấy navbar dính ở đầu.</p>
    <!-- Lặp nhiều p để tạo độ cao -->
  </div>
</body>
</html>

Navbar <ul> cuộn bình thường cho đến khi chạm top: 0 viewport, thì dính lại. Cần z-index cao để đè lên nội dung.