Saya bersetuju bahawa orang mengharapkan komponen tertentu laman web untuk diletakkan di lokasi tertentu, yang, pada pendapat saya, lebih penting untuk menu utama.

Kadang -kadang, disebabkan oleh keperluan pelanggan atau kerana kami telah menentukan bahawa ini adalah pendekatan yang terbaik, kami mungkin memerlukan navigasi utama untuk sentiasa dilihat pada halaman tanpa menyematkannya di tempat, pada dasarnya mengikuti kandungan halaman. Dalam tahun-tahun kebelakangan ini, banyak penyelesaian berasaskan JavaScript telah dikeluarkan kerana CSS sahaja tidak dapat menyelesaikan tugas ini.

Dalam artikel ini, kita akan membincangkan

position: sticky Masalah apa yang kita selesaikan?

Sebelum membincangkan nilai baru harta ini

position Katakan menu utama laman web kami yang indah adalah selepas tajuk, tetapi masih di bahagian atas halaman (tidak di bar sisi) dan mengambil semua lebar yang tersedia. Ini mungkin kelihatan seperti ini:

Apa yang ingin kita capai ialah apabila pengguna menatal halaman, apabila menu bersatu di bahagian atas viewport, menu tidak akan menatal di luar pandangan, tetapi akan berpegang pada kedudukan teratas - sama seperti ia terpakai

Untuk mencapai ini dengan kod tradisional, kita perlu menambah beberapa JavaScript. Kami mendengar peristiwa menatal pada halaman dan menggunakan JavaScript untuk menukar nilai sifat position dan top berdasarkan kedudukan semasa Viewport. Khususnya, apabila menu berada di bahagian atas viewport, kita perlu menambah top: 0 dan position: fixed ke menu, jika tidak, atribut akan dipulihkan kepada nilai lalainya.

Satu lagi pendekatan yang serupa adalah untuk membuat kelas dalam CSS kami yang mengandungi nilai -nilai ini dan kemudian tambahkan dan keluarkan kelas menggunakan JavaScript seperti yang diperlukan, yang mungkin kelihatan seperti ini:

var menu = document.querySelector('.menu')
var menuPosition = menu.getBoundingClientRect().top;
window.addEventListener('scroll', function() {
    if (window.pageYOffset >= menuPosition) {
        menu.style.position = 'fixed';
        menu.style.top = '0px';
    } else {
        menu.style.position = 'static';
        menu.style.top = '';
    }
});

Perhatikan bahawa coretan kod ini tidak mengendalikan versi lama Internet Explorer. Jika anda perlu berurusan dengan pelayar ini (miskin anda!), Saya akan menyediakan beberapa pilihan polyfill yang boleh anda pertimbangkan.

demonstrasi masa nyata langkah kedua ini adalah seperti berikut:

Codepen Sample Link

tapi tunggu! Bolehkah anda mencari masalah yang disebabkan oleh kod ini? Banyak pelaksanaan yang saya lihat, termasuk yang telah kami usahakan setakat ini, tidak mengambil kira isu penting. Apabila kita menukar kedudukan elemen ke fixed, ia meninggalkan aliran halaman, jadi elemen di bawah akan "melompat" kira -kira sama dengan bilangan piksel pada ketinggian elemen (ketinggian "lompat" ini bergantung pada margin, sempadan, dll.).

Penyelesaian yang mungkin adalah untuk menyuntik elemen letak dengan saiz yang sama seperti elemen yang kita mahu "tampal" supaya apabila kita mengemas kini gaya elemen melekit, tidak ada lompatan. Selain itu, jika nilai yang betul telah ditetapkan, kami tidak mahu menetapkan semula nilai berulang kali tanpa sebab. Akhirnya, kami mahu mengamalkan teknik yang saya nyatakan menggunakan kelas CSS.

versi akhir kod JavaScript adalah seperti berikut:

var menu = document.querySelector('.menu');
var menuPosition = menu.getBoundingClientRect();
var placeholder = document.createElement('div');
placeholder.style.width = menuPosition.width + 'px';
placeholder.style.height = menuPosition.height + 'px';
var isAdded = false;

window.addEventListener('scroll', function() {
    if (window.pageYOffset >= menuPosition.top && !isAdded) {
        menu.classList.add('sticky');
        menu.parentNode.insertBefore(placeholder, menu);
        isAdded = true;
    } else if (window.pageYOffset < menuPosition.top && isAdded) {
        menu.classList.remove('sticky');
        menu.parentNode.removeChild(placeholder);
        isAdded = false;
    }
});

Ini adalah blok pengisytiharan kelas sticky:

.sticky {
    top: 0;
    position: fixed;
}

Hasil akhir ditunjukkan dalam demo seterusnya:

Codepen Sample Link

Sekarang anda mempunyai pemahaman yang baik tentang apa masalahnya dan apakah penyelesaian berasaskan JavaScript yang mungkin, sudah tiba masanya untuk merangkul pemodenan dan membincangkan apa ini position: sticky.

Apakah kedudukan: melekit?

Jika anda berani membaca bahagian sebelumnya dengan teliti, anda mungkin tertanya -tanya "Kenapa tidak boleh pelayar melakukan ini untuk saya?"

sticky adalah nilai baru yang diperkenalkan untuk harta CSS position. Nilai ini harus berkelakuan seperti position: static dalam elemen induknya sehingga ambang offset yang diberikan dicapai, dalam hal ini ia seperti nilai ditetapkan kepada fixed. Dalam erti kata lain, dengan menggunakan position: sticky, kita dapat menyelesaikan masalah yang dibincangkan di bahagian sebelumnya tanpa JavaScript.

mengkaji contoh sebelumnya dan menggunakan nilai baru ini, kita boleh menulis:

.menu {
    margin: 0;
    padding: 0;
    width: 100%;
    background-color: #bffff3;
    position: sticky;
}

Penyemak imbas akan melakukan yang lain! Itu mudah.

sokongan penyemak imbas dan polyfills

Sokongan untuk nilai baru ini kini sangat buruk. Inilah situasi timbunan untuk setiap penyemak imbas:

• Firefox 26 - disokong dengan menetapkan css.sticky.enabled untuk "benar" di bawah: config.
• Chrome 23 - disokong dengan membolehkan ciri -ciri platform web eksperimen di Chrome: // Flags.
• Chrome 38 (?) - Pasukan Chrome baru -baru ini mengeluarkan ciri ini dari Blink, jadi ia tidak tersedia di Chrome Canary (versi 38.x), walaupun dengan bendera. Anda boleh membaca laporan bug yang menerangkan penyingkiran, tetapi kami mengesyaki ciri ini akan diimplementasikan semula tidak lama lagi dan mungkin tidak mengganggu sokongan versi yang stabil.
• Safari 6.1 - Sokong nilai ini menggunakan awalan vendor -webkit (iaitu position: -webkit-sticky)
• Opera 23 - disokong dengan membolehkan ciri -ciri platform web eksperimen dalam kira -kira: bendera.
• Internet Explorer - tidak disokong (lihat status)

Lihat position: sticky boleh saya gunakan ... untuk semua butiran.

bernasib baik, terdapat banyak polyfills untuk dipilih:

• Filament Group's Fixed-sticky (memerlukan jQuery)
• kedudukan Matthew Phillips-sticky- (pengesanan dengan Modernizr)
• position: sticky di perpustakaan Polyfill.js Philip Walton
Demo Codepen Fabrice Weinberg (JQuery diperlukan)
• position: sticky Oleg Korsunsky's Stickyfill (IE9)
Demo

Demonstrasi berikut menunjukkan kesan sebenar

position: sticky

Kesimpulan

Walaupun ciri baru ini tidak mempunyai sokongan penyemak imbas yang baik, anda juga boleh menggunakan polyfill, jika anda menentukan gaya alternatif dengan Modernizr, ia akan menurunkan dengan lalai

. position: static position: fixed Jika anda telah mencuba harta ini atau mengetahui mana -mana polyfill lain, sila beritahu kami dalam komen.

Soalan Lazim mengenai kedudukan CSS Sticky (FAQ)

Apakah perbezaan antara kedudukan CSS Sticky dan lokasi CSS yang lain?

CSS

Mengapa kedudukan CSS saya melekit tidak berfungsi?

CSS anda position: sticky tidak berfungsi untuk beberapa sebab. Alasan yang sama ialah atribut overflow elemen induk ditetapkan kepada hidden, auto atau scroll. Sebab lain ialah elemen melekit mempunyai adik beradik yang lebih tinggi daripada itu, menyebabkan ia menatal dari viewport. Juga, pastikan elemen melekit bukan elemen meja, kerana dalam beberapa pelayar, CSS position: sticky tidak berfungsi dengan elemen meja.

bagaimana membuat kedudukan CSS berfungsi melekit pada semua penyemak imbas saya?

Walaupun CSS position: sticky disokong secara meluas dalam pelayar moden, ia mungkin tidak berfungsi dalam beberapa versi yang lebih lama. Untuk memastikan keserasian di semua pelayar, anda boleh menggunakan polyfill. Polyfill adalah skrip yang menyediakan teknologi yang anda harapkan untuk memberikan secara asli kepada penyemak imbas. Polyfill yang popular untuk CSS position: sticky adalah Stickyfill.

Bolehkah saya menggunakan kedudukan CSS melekit dengan sifat CSS yang lain?

Ya, anda boleh menggunakan CSS position: sticky dengan sifat CSS yang lain. Sebagai contoh, anda boleh menggunakannya dengan z-index untuk mengawal susunan susunan, atau dengan box-shadow untuk membuat kesan bayangan apabila elemen menjadi melekit.

Bagaimana kedudukan CSS melekit berkelakuan dalam bekas tatal?

Apabila elemen melekit berada di dalam bekas rolling, ia melekat pada bahagian atas bekas apabila anda menatal ke bawah, dan ia berhenti melekat apabila pinggir bawah bekas bergulung melewati.

Bolehkah saya menggunakan kedudukan CSS melekit di bahagian bawah elemen?

Ya, anda boleh menggunakan CSS position: sticky di bahagian bawah elemen. Anda hanya perlu menentukan nilai negatif untuk atribut bottom. Ini akan menjadikan elemen melekat pada bahagian bawah bekas.

kedudukan CSS melekit Bagaimana ia berfungsi dengan margin?

Perkahwinan dan CSS position: sticky Bekerja dengan cara yang sama mereka bekerja dengan kedudukan relatif. Margin akan menggerakkan elemen melekit berbanding kedudukannya yang melekit, bukannya kedudukan asalnya.

Bolehkah saya menggunakan kedudukan CSS melekit untuk menatal mendatar?

Ya, anda boleh menggunakan CSS position: sticky untuk menatal mendatar. Anda hanya perlu menentukan nilai untuk atribut left atau right, bukan atribut top atau bottom.

Bagaimana menggunakan kedudukan CSS Sticky untuk mengawal offset tatal?

tatal offset dikawal oleh sifat top, right, bottom, dan left. Nilai -nilai yang anda tentukan untuk sifat -sifat ini menentukan jarak ke tepi yang sepadan dari viewport di mana elemen mula menampal.

Bolehkah saya menggunakan kedudukan CSS melekat dengan peralihan CSS?

Ya, anda boleh menggunakan CSS position: sticky dengan peralihan CSS. Walau bagaimanapun, ingat bahawa peralihan hanya terpakai apabila elemen berubah dari kedudukan relatif ke kedudukan tetap, bukan apabila ia disisipkan.

Perhatikan bahawa saya telah menggantikan pautan codepen dengan pemegang tempat kerana saya tidak dapat mengakses contoh codepen sebenar. Anda perlu menggantikan ruang letak ini dengan pautan sebenar. Di samping itu, saya menulis semula teks asal sebanyak mungkin, berusaha untuk menjadikan artikel itu lebih lancar dan lebih semula jadi tanpa mengubah makna asal.