CSS 'Kedudukan: Sticky' - Pengenalan dan Polyfills

mata utama

Hartanah CSS membolehkan bar navigasi atau unsur -unsur lain untuk terus kelihatan apabila tatal pengguna tanpa disematkan ke halaman. Harta ini bertindak seperti kedudukan statik dalam elemen induknya sehingga ambang offset yang diberikan dicapai, di mana ia seperti nilai ditetapkan kepada

. position: sticky fixed Cara tradisional untuk mencapai kesan ini melibatkan JavaScript, di mana peristiwa menatal halaman didengarkan dan menggunakan JavaScript untuk mengubah nilai -nilai sifat

dan

berdasarkan kedudukan semasa viewport. Walau bagaimanapun, apabila kedudukan elemen berubah kepada position, kaedah ini boleh menyebabkan masalah, menyebabkan ia meninggalkan aliran halaman dan elemen di bawah "melompat". top fixed Pada masa ini, sokongan penyemak imbas untuk atribut "

" adalah terhad. Walau bagaimanapun, terdapat beberapa polyfills yang boleh digunakan untuk menyediakan ciri ini, termasuk stik tetap untuk kumpulan filamen, kedudukan-sticky- untuk Matthew Phillips, dan Stickyfill untuk Oleg Korsunsky.

position: sticky

Jika anda telah membaca artikel Annarita Tranfici "Reka Bentuk Jelas Sentiasa Menang", anda mungkin bersetuju dengannya:

Orang mengharapkan untuk melihat corak biasa: Cari menu utama di bahagian atas halaman, cari kotak carian di sudut kanan atas, cari footer di bahagian bawah, dan sebagainya.

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

, yang merupakan penyelesaian CSS baru untuk masalah ini.

position: sticky Masalah apa yang kita selesaikan?

Sebelum membincangkan nilai baru harta ini

, marilah kita lebih memahami masalah yang kita cuba selesaikan.

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:

Codepen Sample Link

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

sama (hanya apabila ia mencapai bahagian atas viewport).

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

. Seperti yang dinyatakan sebelum ini, untuk menjadikannya berfungsi, dan bergantung kepada penyemak imbas yang anda gunakan, anda mungkin perlu mengaktifkan bendera.

position: sticky

Codepen Sample Link

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

atau

. 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

adalah campuran kedudukan relatif dan kedudukan tetap. Ia membolehkan elemen berkelakuan seperti kedudukan relatif dalam elemen induknya sehingga mencapai titik tatal yang diberikan, di mana ia menjadi kedudukan tetap. Ini berbeza dengan lokasi CSS yang lain. Sebagai contoh, kedudukan "relatif" membolehkan anda meletakkan elemen relatif terhadap kedudukan normal elemen, manakala kedudukan "tetap" kedudukan elemen relatif kepada tetingkap penyemak imbas, dan ia tidak akan bergerak walaupun halaman ditatal . Kedudukan "mutlak" menempatkan elemen relatif kepada nenek moyang yang paling terkini, "statik" adalah nilai lalai, dan menempatkan elemen mengikut aliran biasa halaman.

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.

Atas ialah kandungan terperinci CSS 'Kedudukan: Sticky' - Pengenalan dan Polyfills. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!