Cách đây 4 năm, Eric Bidelman đã tạo một bài đăng trên blog khá thú vị về việc position: sticky đã xuất hiện trong WebKit. Vào thời điểm đó, WebKit là công cụ hỗ trợ Chrome (cũng như nhiều trình duyệt khác, bao gồm cả Safari). Một năm sau, khiến các nhà phát triển web vô cùng hoang mang, chúng tôi đã xoá position:sticky khỏi Chrome vì "cách triển khai hiện tại không được thiết kế để tích hợp tốt với hệ thống cuộn và kết hợp hiện có".
Chúng tôi luôn muốn đưa tính năng này trở lại Chrome như lỗi đã nêu: "Sau khi đã sắp xếp xong việc cuộn và kết hợp, chúng ta nên quay lại position:
sticky và triển khai tính năng này theo cách tích hợp tốt với phần còn lại của công cụ". Lỗi meta theo dõi quá trình triển khai đã được khắc phục kể từ năm 2013.
Tin vui là kể từ Chrome 56 (hiện đang ở phiên bản thử nghiệm từ tháng 12 năm 2016, phiên bản ổn định từ tháng 1 năm 2017) position: sticky đã trở lại Chrome.
position:sticky là gì?
Phải mất một chút thời gian thì tôi mới có thể đến đây. Vậy tại sao tôi lại hào hứng về điều này?
position:sticky là một thuộc tính định vị CSS cho phép bạn cố định một phần tử vào khung nhìn (tức là neo phần tử đó vào đầu màn hình) nhưng chỉ khi phần tử mẹ của phần tử đó hiển thị trong khung nhìn và nằm trong giá trị ngưỡng. Khi không được cố định vào khung nhìn, phần tử này sẽ hoạt động như position: relative. Đây là một tính năng bổ sung rất hay và đơn giản cho nền tảng, giúp bạn không cần phải sử dụng JavaScript trong trình xử lý sự kiện onscroll chỉ để khoá một phần tử ở đầu khung nhìn.
Đây là giao diện của blog của tôi. Điều này cho phép tôi giữ tiêu đề của phần hiện tại ở đầu màn hình trong khi bạn đọc các bài viết khá dài và khó hiểu của tôi :\
Để triển khai tính năng này, hãy chỉ định rằng thuộc tính position phải có giá trị là sticky trên phần tử mà bạn muốn bị kẹt.
Ngoài ra, bạn cũng có thể thêm độ dời tại vị trí cần bị kẹt.
h3 {
/* Element will be 'fixed' when it ... */
position: sticky;
/* ... is 10px from the top of the viewport */
top: 10px;
}
Ví dụ trước sẽ cố định phần tử <h3> ở 10px từ đầu khung nhìn. Để khắc phục vấn đề này ngay trên đầu khung nhìn, bạn sẽ đặt thuộc tính top thành top: 0px.
Tính năng này được hỗ trợ khá tốt. Tiện ích này có trên Chrome (tuyệt vời), Firefox và Safari. Dưới đây là một số thông tin chi tiết khác về position:sticky: