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 nilai minimum offset tertentu terpenuhi di area tampilan.

Kasus penggunaan

Parafrase dari proposal asli Edward O'Connor tentang fitur ini:

Memperkenalkan posisi melekat

LAUNCH DEMO

Dengan menambahkan position: sticky (awalan vendor), kita dapat memberi tahu elemen untuk menjadi position: relative hingga pengguna men-scroll item (atau induknya) menjadi 15 px dari atas:

.sticky {
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    position: -o-sticky;
    top: 15px;
}

Di top: 15px, elemen menjadi tetap.

Untuk mengilustrasikan fitur ini dalam setelan praktis, saya telah menyusun DEMO yang menempelkan judul blog saat Anda men-scroll.

Pendekatan lama: peristiwa scroll

Hingga saat ini, untuk mendapatkan efek melekat, situs menyiapkan pemroses peristiwa scroll di JS. Kita juga menggunakan teknik ini di tutorial html5rocks. Pada layar yang lebih kecil dari 1200 piksel, sidebar daftar isi akan berubah menjadi position: fixed setelah di-scroll sejumlah tertentu.

Berikut adalah cara (sekarang sudah lama) untuk memiliki header yang tetap berada 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>

Coba: http://output.jsbin.com/omanut/2/

Hal ini cukup mudah, tetapi model ini akan cepat rusak jika Anda ingin melakukannya untuk sekumpulan node DOM, misalnya, setiap judul <h1> blog saat pengguna men-scroll.

Alasan JS tidak ideal

Secara umum, pengendali scroll bukanlah ide yang bagus. Orang-orang cenderung melakukan terlalu banyak pekerjaan dan bertanya-tanya mengapa UI mereka tidak stabil.

Hal lain yang perlu dipertimbangkan adalah semakin banyak browser yang menerapkan scroll dengan akselerasi hardware untuk meningkatkan performa. Masalahnya adalah pada pengendali scroll JS yang sedang digunakan, browser dapat kembali ke mode (software) yang lebih lambat. Sekarang kita tidak lagi berjalan di GPU. Sebagai gantinya, kita kembali ke CPU. Hasilnya? Pengguna merasakan lebih banyak jank saat men-scroll halaman Anda.

Oleh karena itu, akan sangat masuk akal jika fitur tersebut bersifat deklaratif di CSS.

Dukungan

Sayangnya, tidak ada spesifikasi untuk ini. Fitur ini diusulkan di www-style pada bulan Juni dan baru saja diluncurkan di WebKit. Artinya, tidak ada dokumentasi yang baik untuk dirujuk. Namun, ada 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 nightly.