CSS position: sticky

Định vị dính (sticky)

position: sticky kết hợp relative và fixed. Phần tử hành xử như relative cho đến khi cuộn chạm ngưỡng (top, bottom, left, right), thì chuyển thành fixed tương đối viewport.

Ví dụ: Thanh điều hướng dính đầu trang

<!DOCTYPE html>
<html>
<head>
  <style>
    div.sticky {
      position: -webkit-sticky; /* Safari cũ */
      position: sticky;
      top: 0; /* Dính khi chạm đỉnh viewport */
      padding: 10px;
      background-color: orange;
      border: 1px solid blue;
      z-index: 100; /* Đảm bảo trên cùng khi cuộn */
    }
  </style>
</head>
<body>
  <p>Cuộn xuống để xem hiệu ứng sticky!</p>
  <div class="sticky">Tôi dính ở đầu trang khi cuộn</div>
  <div style="padding-bottom: 2000px;">
    <p>Nội dung dài để cuộn...</p>
    <p>Cuộn xuống để xem div dính.</p>
  </div>
</body>
</html>

Khi cuộn trang, div .sticky sẽ "dính" ở top: 0 của viewport. Cần cha không có overflow: hidden/auto/scroll (trừ viewport). Hỗ trợ tốt trình duyệt hiện đại (cần prefix -webkit- cho Safari cũ).