Cách thực hiện - Phần 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
Ví dụ
div.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}
Hãy tự mình thử » Một phần tử có position: sticky;
được định vị dựa trên vị trí cuộn của người dùng.
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 một vị trí bù nhất định trong khung nhìn - sau đó nó "cố định" tại chỗ (như vị trí: cố định).
Lưu ý: Internet Explorer, Edge 15 và các phiên bản cũ hơn 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 top
, right
, bottom
hoặc left
để định vị cố định hoạt động.
Để tìm hiểu thêm về định vị CSS, hãy đọc hướng dẫn về Vị trí CSS của chúng tôi.