Bersiaplah mendarat! posisi - mendarat di WebKit

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

Demo melekat

LUNCURKAN DEMO

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.