Untuk melaksanakan header atau footer melekit, kunci adalah menggunakan kedudukan: melekit dengan betul. Apabila melaksanakan header melekit, anda perlu menetapkan kedudukan: melekit dan atas: 0, dan pastikan bekas induk tidak menetapkan limpahan: tersembunyi. Adalah disyorkan untuk menambah z-indeks untuk mengelakkan penindasan; 1. Header melekit tidak melepaskan dari aliran dokumen, dan ditetapkan apabila menatal ke atas, dan tidak menjejaskan susun atur kandungan lain; 2. Untuk melaksanakan footer melekit, anda perlu membungkus kandungan utama dan menetapkan kedudukan Footer: melekit dan bawah: 0, tetapi hanya berkuatkuasa apabila kandungannya kurang dari satu skrin; 3. Apabila menggunakan Sticky, anda perlu ambil perhatian bahawa elemen induk tidak boleh melimpah: Tersembunyi/Tatal/Auto, atas atau bawah mesti ditentukan, dan penggunaan transform/penapis/perubahan kehendak dan atribut lain, dan ketinggian elemen melekit tidak dapat melebihi blok yang disertakan. Sticky adalah harta praktikal tetapi ketat, dan boleh digunakan untuk kedudukan tetap yang bergantung kepada konteks menatal.

Sebenarnya tidak sukar untuk membuat header atau footer melekit, kunci adalah menggunakan position: sticky dengan baik. Ia tidak keluar dari aliran dokumen seperti tetap, tetapi antara relatif dan tetap dan boleh "dilekatkan" pada skrin mengikut kedudukan tatal. Tetapi untuk menggunakannya dengan betul, terdapat beberapa butiran yang mesti diberi perhatian.

Penulisan asas Header Sticky

Ingin mempunyai tajuk yang ditetapkan di bahagian atas? Hanya tetapkan position: sticky untuk tajuk dan tambah top: 0 . Dengan cara ini penyemak imbas tahu: Apabila elemen skrol ke bahagian atas, selesaikannya.

 header {
  Kedudukan: melekit;
  Atas: 0;
  Z-indeks: 1000;
}

Beberapa perkara yang perlu diperhatikan:

• Bekas induk tidak boleh melimpah: Tersembunyi , jika tidak melekit tidak akan berkuatkuasa.
• Adalah lebih baik untuk menambah z-index untuk mengelakkannya daripada dilindungi oleh kandungan lain.
• Ia tidak menduduki ruang dan hilang, yang berbeza dari tetap.

Sebagai contoh, anda mempunyai bar navigasi dengan gambar spanduk di atasnya. Header Sticky secara semulajadi akan menimpa sepanduk selepas menatal, tetapi kandungan halaman lain terus menatal.

Cara Melaksanakan Footer Sticky

Footer agak menyusahkan untuk melekit di bahagian bawah, kerana kebanyakan masa yang kita mahu ia dipaparkan pada akhir kandungan secara lalai, dan hanya melekat pada bahagian bawah skrin jika kandungannya tidak cukup tinggi. Ini memerlukan sedikit koordinasi struktur.

Amalan biasa adalah menggunakan bekas pembalut untuk membungkus kandungan utama dan menetapkan footer untuk melekit:

 <div class = "wrapper">
  <tain> Kandungan halaman </main>
  <footer class = "sticky-footer"> Ini adalah bahagian bawah </footer>
</div>

CSS:

 .sticky-footer {
  Kedudukan: melekit;
  Bawah: 0;
  Latar Belakang: Putih;
}

Walau bagaimanapun, kaedah ini hanya sesuai untuk situasi di mana ketinggian kandungan kurang daripada satu skrin. Sekiranya kandungannya sangat panjang, Footer masih akan menatal secara normal. Jika anda mahu footer sentiasa berada di bahagian bawah viewport (sama dengan tetap), anda masih perlu menggunakan position: fixed .

Soalan dan nota yang sering ditanya

Apabila menggunakan Sticky, beberapa lubang mudah dilangkah. Berikut adalah beberapa perkara biasa:

• Unsur induk telah menetapkan overflow: hidden/scroll/auto → Sticky tidak sah
• Tidak ada top atau bottom yang ditentukan → penyemak imbas tidak tahu di mana anda mahu berpegang teguh
• Penggunaan transform , filter , will-change dan Hartanah Lain → Melekit mungkin tidak sah
• Ketinggian elemen melekit tidak dapat melebihi ketinggian blok yang mengandungi → jika tidak, ia mungkin tidak melekat

Jadi ingatlah untuk memeriksa tempat -tempat ini selepas menulis. Kadang -kadang saya dengan jelas menulis Sticky tetapi tidak bertindak balas, kebanyakan sebabnya.

Pada dasarnya itu sahaja. Sticky adalah harta yang sangat praktikal, ingat bahawa ia bergantung pada konteks menatal, tidak semua kes terpakai. Jika anda menguasai mata ini dengan baik, tidak akan sukar untuk melakukan header atau footer melekit.

Atas ialah kandungan terperinci Cara membuat tajuk atau footer melekit menggunakan kedudukan CSS Sticky. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!