position: sticky là một cách mới để định vị các phần tử và tương tự về mặt khái niệm với position: fixed. Điểm khác biệt là phần tử có position: sticky hoạt động như position: relative trong phần tử mẹ, cho đến khi đạt ngưỡng chênh lệch nhất định trong khung nhìn.
Trường hợp sử dụng
Nội dung tóm tắt từ đề xuất ban đầu của Edward O'Connor về tính năng này:
Giới thiệu tính năng định vị cố định
Chỉ cần thêm position: sticky (có tiền tố của nhà cung cấp), chúng ta có thể yêu cầu một phần tử là position: relative cho đến khi người dùng cuộn mục (hoặc phần tử mẹ) cách đầu 15px:
.sticky {
position: -webkit-sticky;
position: -moz-sticky;
position: -ms-sticky;
position: -o-sticky;
top: 15px;
}
Tại top: 15px, phần tử này trở thành cố định.
Để minh hoạ tính năng này trong một chế độ thực tế, tôi đã tạo một DEMO để gắn các tiêu đề blog khi bạn cuộn.
Phương pháp cũ: sự kiện cuộn
Cho đến nay, để đạt được hiệu ứng cố định, các trang web thiết lập trình nghe sự kiện scroll trong JS. Chúng tôi cũng sử dụng kỹ thuật này trong các hướng dẫn trên html5rocks. Trên màn hình nhỏ hơn 1200px, thanh bên mục lục sẽ thay đổi thành position: fixed sau một khoảng cuộn nhất định.
Sau đây là cách (hiện đã cũ) để có một tiêu đề cố định ở đầu khung nhìn khi người dùng cuộn xuống và trở lại vị trí cũ khi người dùng cuộn lên:
<div class="header"></div>
<script>
var header = document.querySelector('.header');
var origOffsetY = header.offsetTop;
function onScroll(e) {
window.scrollY >= origOffsetY ? header.classList.add('sticky') :
header.classList.remove('sticky');
}
document.addEventListener('scroll', onScroll);
</script>
Hãy thử: http://output.jsbin.com/omanut/2/
Việc này khá dễ dàng, nhưng mô hình này sẽ nhanh chóng bị hỏng nếu bạn muốn thực hiện việc này cho một loạt nút DOM, chẳng hạn như mọi tiêu đề <h1> của một blog khi người dùng cuộn.
Lý do JS không lý tưởng
Nhìn chung, bạn không nên sử dụng trình xử lý cuộn. Mọi người thường làm quá nhiều việc và tự hỏi tại sao giao diện người dùng của họ bị giật.
Một điều khác cần cân nhắc là ngày càng có nhiều trình duyệt triển khai tính năng cuộn tăng tốc phần cứng để cải thiện hiệu suất. Vấn đề với điều này là khi trình xử lý cuộn JS đang hoạt động, trình duyệt có thể quay lại chế độ (phần mềm) chậm hơn. Bây giờ, chúng ta không còn chạy trên GPU nữa. Thay vào đó, chúng ta sẽ quay lại CPU. Kết quả? Người dùng nhận thấy hiện tượng giật nhiều hơn khi cuộn trang.
Do đó, việc khai báo tính năng như vậy trong CSS là rất hợp lý.
Hỗ trợ
Rất tiếc, không có thông số kỹ thuật nào cho loại này. Tính năng này được đề xuất trên www-style vào tháng 6 và vừa ra mắt trong WebKit. Điều đó có nghĩa là không có tài liệu phù hợp nào để tham khảo. Tuy nhiên, cần lưu ý một điều, theo lỗi này, nếu bạn chỉ định cả left và right, thì left sẽ thắng. Tương tự, nếu top và bottom được sử dụng cùng một lúc, thì top sẽ thắng.
Hiện tại, chúng tôi hỗ trợ Chrome 23.0.1247.0 trở lên (Canary hiện tại) và WebKit hằng đêm.