CSS Sticky Position
Created by user-glyn3iv
2 year(s) ago
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.