position: sticky là một cách mới để định vị các phần tử và về mặt lý thuyết, nó tương tự như position: fixed. Điểm khác biệt là một phần tử có position: sticky hoạt động tương tự như position: relative trong phần tử mẹ cho đến khi đạt một ngưỡng chênh lệch nhất định trong khung nhìn.
Trường hợp sử dụng
Dẫn lời từ đề xuất ban đầu của Edward O’Connor về tính năng này:
Giới thiệu về vị trí cố định
Chỉ cần thêm position: sticky (nhà cung cấp có tiền tố), 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 thành phần mẹ) thành 15px từ trên cùng:
.sticky {
position: -webkit-sticky;
position: -moz-sticky;
position: -ms-sticky;
position: -o-sticky;
top: 15px;
}
Tại top: 15px, phần tử sẽ trở thành cố định.
Để minh hoạ tính năng này trong bối cảnh thực tế, tôi đã tập hợp một BẢN THỬ NGHIỆM giúp gắn 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 sẽ thiết lập trình nghe sự kiện scroll trong JS. Chúng tôi cũng thực sự sử dụng kỹ thuật này trên các hướng dẫn về html5rock. Trên các màn hình nhỏ hơn 1200px, thanh bên của mục lục sẽ thay đổi thành position: fixed sau một khoảng thời gian cuộn nhất định.
Sau đây là cách (hiện là cách cũ) để tiêu đề nằm cố định ở đầu khung nhìn khi người dùng cuộn xuống và quay trở lại vị trí 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/
Điều này đủ dễ, 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 các nút DOM, giả sử mỗi tiêu đề <h1> của một blog khi người dùng cuộn.
Lý do khiến JS không lý tưởng
Nhìn chung, bạn không nên sử dụng trình xử lý cuộn. Người chơi dân gian có xu hướng làm quá nhiều việc và tự hỏi tại sao giao diện người dùng của mình lại bị giật.
Một điều khác cần xem xét là ngày càng nhiều trình duyệt triển khai tính năng cuộn có tăng tốc phần cứng để cải thiện hiệu suất. Vấn đề xảy ra là khi trình xử lý cuộn JS đang hoạt động, trình duyệt có thể quay lại chế độ chậm hơn (phần mềm). Giờ đây, chúng ta sẽ không chạy được GPU nữa. Thay vào đó, chúng ta sẽ quay lại với CPU. Kết quả? Người dùng thường nhận thấy tình trạ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 cho trò chơi này. Nội dung này đã được đề xuất với www-style vào tháng 6 và vừa được cập nhật trong WebM. Điều đó có nghĩa là không có tài liệu nào tốt để trỏ đến. Tuy nhiên, một điều cần lưu ý là theo lỗi này, nếu cả left và right đều được chỉ định, thì left sẽ thắng. Tương tự, nếu sử dụng top và bottom cùng lúc, thì top sẽ thắng.
Hỗ trợ hiện tại là Chrome 23.0.1247.0+ (Canary hiện tại) và ASan ban đêm.