Empat tahun yang lalu, Eric Bidelman membuat postingan blog yang cukup menarik dengan fakta bahwa
position: sticky
berada di WebKit,
yang pada saat itu merupakan mesin yang mendukung Chrome (serta banyak browser
lain termasuk Safari). Satu tahun kemudian, dan sangat mengkhawatirkan developer web,
kami menghapus position:sticky
dari Chrome karena "
implementasi saat ini tidak dirancang dengan cara yang terintegrasi secara baik dengan
sistem scroll dan pengomposisian yang ada".
Kami selalu ingin mengembalikannya ke Chrome seperti yang dinyatakan bug, "Setelah kami
mengatur rumah scroll dan pengomposisian secara berurutan, kami harus kembali ke position:
sticky
dan mengimplementasikan fitur tersebut dengan cara yang terintegrasi secara baik dengan mesin
lainnya". Bug meta yang melacak
implementasi telah dikerjakan sejak tahun 2013.
Kabar baiknya adalah mulai Chrome 56 (saat ini dalam versi beta per Desember 2016,
stabil pada Januari 2017) position: sticky
kini kembali di Chrome.
Apa yang dimaksud dengan position:sticky?
Butuh sedikit waktu untuk sampai ke sini, jadi mengapa saya bersemangat?
position:sticky
adalah atribut pemosisian CSS yang memungkinkan Anda memperbaiki
elemen ke area pandang (yaitu, menambatkannya ke bagian atas layar),
tetapi hanya saat induknya terlihat di area tampilan dan berada dalam
nilai batas. Jika tidak tetap ke area pandang, elemen akan bertindak seperti
position: relative
. Ini adalah tambahan yang sangat bagus dan sederhana pada
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. Hal ini memungkinkan saya untuk mempertahankan header bagian saat ini di bagian atas layar sementara Anda membaca artikel saya yang agak panjang dan melelahkan :\
Untuk mengimplementasikan fitur ini, tentukan bahwa atribut position
harus memiliki nilai sticky
pada elemen yang Anda inginkan, er, macet.
Selain itu, Anda juga dapat menambahkan offset di tempat yang seharusnya macet.
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 jarak 10 piksel dari bagian atas area pandang. Untuk memperbaikinya langsung di bagian atas area pandang, Anda harus menetapkan
atribut top
sebagai top: 0px
.
Dukungan untuk fitur ini cukup kuat. Fitur ini tersedia di Chrome,
Firefox, dan Safari. Berikut detail selengkapnya tentang position:sticky
: