Empat tahun lalu, Eric Bidelman membuat postingan blog yang cukup keren tentang fakta bahwa
position: sticky di-deploy di WebKit,
yang pada saat itu merupakan mesin yang mendukung Chrome (serta banyak browser
lainnya termasuk Safari). Satu tahun kemudian, dan sangat mengecewakan developer
web, kami menghapus position:sticky dari Chrome karena "
implementasi saat ini tidak dirancang dengan cara yang terintegrasi dengan baik dengan
sistem scroll dan komposisi yang ada".
Kami selalu ingin mengembalikannya ke Chrome seperti yang dinyatakan bug, "Setelah
menyelesaikan masalah scroll dan komposisi, kita harus kembali ke position:
sticky dan menerapkan fitur dengan cara yang terintegrasi dengan baik dengan
mesin lainnya". Bug meta yang melacak
penerapan telah diperbaiki sejak tahun 2013.
Kabar baiknya adalah mulai Chrome 56 (saat ini versi beta mulai Desember 2016,
stabil pada Januari 2017) position: sticky kini kembali di Chrome.
Apa yang dimaksud dengan position:sticky?
Butuh waktu beberapa saat untuk sampai ke sini, jadi mengapa saya sangat menantikannya?
position:sticky adalah atribut pemosisian CSS yang memungkinkan Anda memperbaiki
elemen ke area pandang (yaitu, menautkannya ke bagian atas layar)
tetapi hanya jika induknya terlihat di area pandang dan berada dalam
nilai nilai minimum. Jika tidak disetel ke area pandang, elemen akan berperilaku seperti
position: relative. Ini adalah tambahan yang sangat bagus dan sederhana untuk
platform yang menghilangkan kebutuhan untuk menggunakan JavaScript dalam pengendali peristiwa onscroll
hanya untuk mengunci elemen ke bagian atas area pandang.
Seperti inilah tampilannya di blog saya. Dengan begitu, saya dapat mempertahankan header bagian saat ini di bagian atas layar saat Anda membaca artikel saya yang agak panjang dan melelahkan :\
Untuk menerapkan fitur ini, tentukan bahwa atribut position
harus memiliki nilai sticky pada elemen yang ingin Anda jadikan, eh, macet.
Selain itu, Anda juga dapat menambahkan offset di tempat yang perlu ditempelkan.
h3 {
/* Element will be 'fixed' when it ... */
position: sticky;
/* ... is 10px from the top of the viewport */
top: 10px;
}
Contoh sebelumnya akan memperbaiki elemen <h3> pada 10 piksel dari bagian atas
area pandang. Untuk memperbaikinya langsung ke bagian atas area pandang, Anda akan menetapkan
atribut top sebagai top: 0px.
Dukungan untuk fitur ini cukup kuat. Fitur ini tersedia di Chrome (yay), Firefox, dan Safari. Berikut detail selengkapnya tentang position:sticky: