CSS Sticky Position
Sticky position là kiểu định vị hiển thị của phần tử HTML giúp chúng hiển thị dính ở một vị trí.
Khác với fixed
position thì sử dụng sticky
position, thì ban đầu phần tử HTML vẫn hiển thị một cách bình thường giống như khi bạn áp dụng relative
position cho nó, tuy nhiên khi bạn di chuyển thanh cuộn xuống vị trí khác của trang thì nó bắt đầu hiển thị giống như fixed
postion.
Để hiểu cụ thể công dụng của nó khi hiển thị phần tử HTML như thế nào thì bạn tạo một tập tin HTML như sau:
<html>
<body>
<div class="content">
<div class="head">Logo</div>
<div class="sticky">Menu</div>
</div>
</body>
</html>
Và chèn đoạn mã CSS sau vào trang:
.content {
height: 900px;
text-align: center;
}
.head {
background-color: #bbb;
padding: 20px 20px;
}
.sticky {
position: sticky;
position: -webkit-sticky;
top: 0;
padding: 20px 20px;
background: #7bbdff;
}
Bạn sẽ thấy thanh menu được hiển thị stick khi nó tiến đến vị trí top: 0px
:
Bạn hãy thử thay đổi luật CSS áp dụng gán giá trị cho thuộc tính top
của bộ chọn .sticky
để theo dõi sự khác biệt.
Lưu ý: Sticky position mới chỉ được hỗ trợ bởi các phiên bản mới của các trình duyệt nên các bạn cần chú ý khi sử dụng.