Tạo phần tử dính (Sticky Element) với CSS position:sticky

Thuộc tính position: sticky cho phép phần tử cuộn cùng trang cho đến khi chạm mép viewport, sau đó "dính" lại (giống fixed). Đây là cách tạo sticky header, sidebar, v.v. chỉ bằng CSS.

Ví dụ mã nguồn

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
  body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    margin: 0px;
    padding: 0px;
    height: 150vh; /* Tạo thanh cuộn */
  }
  div.sticky {
    position: sticky;
    top: 0;
    background-color: rgb(52, 21, 110);
    color: white;
    padding: 50px;
    font-size: 20px;
  }
</style>
</head>
<body>
<h1>Ví dụ Sticky Element</h1>
<h2>Văn bản header ngẫu nhiên</h2>
<h2>Văn bản header ngẫu nhiên</h2>
<div class="sticky">Phần tử Sticky</div>
<p style="font-size: 35px;">Lorem ipsum dolor sit amet...</p>
</body>
</html>

Giải thích

• position: sticky - Kết hợp relative + fixed
• top: 0 - Dính vào đỉnh viewport khi cuộn tới
• Yêu cầu: Phần tử cha không được overflow: hidden/auto/scroll

Ứng dụng thực tế

• Sticky header/navigation
• Sidebar dính khi cuộn bài viết dài
• Table header cố định khi cuộn dữ liệu
• Call-to-action button dính cuối màn hình

Hỗ trợ trình duyệt

Hỗ trợ đầy đủ trên tất cả trình duyệt hiện đại (Chrome 56+, Firefox 32+, Safari 6.1+, Edge 16+). Cần prefix -webkit-sticky cho Safari cũ.