CÁCH LÀM - Yếu tố dính
Tìm hiểu cách tạo phần tử cố định bằng CSS.
Lưu ý: Ví dụ này không hoạt động trong Internet Explorer hoặc Edge 15 và các phiên bản cũ hơn.
Yếu tố dính
Thí dụ
div.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}
Một phần tử với position: sticky;
được định vị dựa trên vị trí cuộn của người dùng.
Một phần tử cố định chuyển đổi giữa relative
và fixed
, tùy thuộc vào vị trí cuộn. Nó được định vị tương đối cho đến khi gặp vị trí bù nhất định trong khung nhìn - sau đó nó "dính" đúng vị trí (như vị trí: fixed).
Lưu ý: Internet Explorer, Edge 15 và các phiên bản trước đó không hỗ trợ định vị cố định. Safari yêu cầu tiền tố -webkit- (xem ví dụ bên dưới). Bạn cũng phải chỉ định ít nhất một trong số top
hoặc để right
định vị cố định hoạt động.bottom
left
Để tìm hiểu thêm về định vị CSS, hãy đọc hướng dẫn Định vị CSS của chúng tôi .