position:sticky kembali tersedia di Chrome

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: