position: sticky
adalah cara baru untuk memosisikan elemen dan secara konseptual mirip dengan position: fixed
. Perbedaannya adalah elemen dengan position: sticky
berperilaku seperti position: relative
dalam induknya, hingga batas offset tertentu tercapai di area pandang.
Kasus penggunaan
Parafrasa dari proposal asli Edward O'Connor tentang fitur ini:
Memperkenalkan posisi melekat
Hanya dengan menambahkan position: sticky
(diberi awalan vendor), kita dapat memberi tahu suatu elemen menjadi position: relative
hingga pengguna men-scroll item (atau induknya) menjadi 15 piksel dari atas:
.sticky {
position: -webkit-sticky;
position: -moz-sticky;
position: -ms-sticky;
position: -o-sticky;
top: 15px;
}
Pada top: 15px
, elemen akan menjadi tetap.
Untuk menggambarkan fitur ini secara praktis, saya telah menyusun DEMO yang menempelkan judul blog saat Anda men-scroll.
Pendekatan lama: peristiwa scroll
Hingga saat ini, untuk mencapai efek melekat, situs menyiapkan pemroses peristiwa scroll
di JS. Kami sebenarnya menggunakan teknik ini juga pada tutorial html5Rock. Pada layar yang lebih kecil dari 1200 piksel, sidebar daftar isi berubah menjadi position: fixed
setelah men-scroll beberapa saat.
Inilah (yang sekarang sudah lama) memiliki header yang menempel di bagian atas area pandang saat pengguna men-scroll ke bawah, dan kembali ke tempatnya saat pengguna men-scroll ke atas:
<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>
Cobalah: http://output.jsbin.com/omanut/2/
Ini cukup mudah, tetapi model ini dengan cepat rusak jika Anda ingin melakukannya
untuk sekumpulan node DOM, misalnya, setiap judul <h1>
blog saat pengguna men-scroll.
Mengapa JS tidak ideal
Secara umum, pengendali scroll bukanlah ide yang bagus. Orang cenderung melakukan terlalu banyak pekerjaan dan bertanya-tanya mengapa UI mereka tersendat.
Hal lain yang perlu dipertimbangkan adalah semakin banyak browser yang menerapkan pengguliran dengan akselerasi perangkat keras untuk meningkatkan kinerja. Masalahnya adalah, pada pengendali scroll JS sedang dijalankan, browser dapat kembali ke mode yang lebih lambat (perangkat lunak). Sekarang kita tidak lagi berjalan di GPU. Sebagai gantinya, kita kembali ke CPU. Hasilnya? Pengguna akan merasakan lebih banyak jank saat men-scroll halaman.
Jadi, sangat masuk akal untuk memiliki fitur seperti itu yang bersifat deklaratif dalam CSS.
Dukungan
Sayangnya, tidak ada spesifikasi untuk yang ini. Pada bulan Juni lalu, diusulkan menggunakan gaya www dan baru mendarat di WebKit. Artinya, tidak ada dokumentasi
yang baik untuk dirujuk. Namun, satu hal yang perlu diperhatikan, menurut bug ini, jika left
dan right
ditentukan, left
akan menang. Demikian pula, jika top
dan bottom
digunakan secara bersamaan, top
akan menang.
Dukungan saat ini adalah Chrome 23.0.1247.0+ (Canary saat ini) dan WebKit setiap malam.