Cara Buat Sticky Footer CSS sahaja
Biasanya, kami memerlukan JavaScript melaksanakan kesan menatal berkaitan dengan tindakan pengguna yang berbeza pada halaman web. Skrip ini berfungsi menjejaki sejauh mana menatal ke bawah atau bawah mengambil halaman, dan mencetuskan tindakan apabila ketinggian ambang dicapai.
Ia bukanlah perkara yang buruk untuk menggunakan JavaScript untuk menatal kesan. Malah terdapat kes-kes yang lebih rumit mustahil untuk diselesaikan tanpa JavaScript. Walau bagaimanapun ada Hacks CSS yang boleh menggantikan skrip ini pada masa-masa.
Siaran ini akan menunjukkan kepada andaw untuk mencipta footer mendedahkan kesan pada tatal halaman menggunakan CSS. Kami akan menggunakan dua kes penggunaan untuk menunjukkan ini: satu untuk keseluruhan halaman (lihat demo) & satu untuk elemen halaman individu, seperti artikel.
Halaman penuh
Kita perlu membuat footer itu muncul dari bawah halaman sementara pengguna sedang menatal ke bawah. Juga, apabila mereka sedang menatal halaman kembali keperluan footer tersembunyi di bawah halaman lagi.
Untuk mencapai matlamat ini, pertama kita perlu mencipta footer dengan kedudukan tetap di bahagian bawah skrin.
1. Buat Footer Tetap
Mari kita tambah beberapa kandungan dan footer ke halaman pertama. Saya menggunakan tag HTML Dalam demo saya, ada gambar kelawar yang ditunjukkan di dalam footer untuk kesan tidak menyeramkan, tetapi anda boleh memilih imej lain yang anda suka. Lorem ipsum dolor sit amet ... Bergerak ke CSS, keluarkan sebarang ruang mengelilingi Berikan beberapa dimensi ( Terapkan Warna kedua Menetapkan Dengan cara ini akan ada ruang yang cukup di bahagian bawah untuk kaki itu boleh dilihat apabila pengguna menatal ke bawah halaman. Itu sahaja. Footer mendedahkan kesan untuk laman web penuh selesai. Lihat demo Codepen di bawah. Teknik ini boleh digunakan untuk elemen HTML individu (dengan pengaki) itu cukup panjang untuk kesan tatal halaman yang betul. Kaedah ini agak rapuh, kerana pada masa ini tidak berfungsi di Chrome dan IE, tetapi ia mempunyai sandaran yang baik. Pertama, mari buat artikel panjang dengan footer. Untuk mempromosikan kod semantik, saya memilih Lorem ipsum dolor sit amet ... Di bawah ini anda boleh lihat gaya asas artikel dan kaki. Artikel saya pada masa ini kelihatan seperti ini. Sudah tentu anda boleh menggunakan peraturan gaya asas yang lain juga. Footer sebelumnya telah ditetapkan, yang akan dilakukan menjadi melekit. Terapkan The Anda boleh menyesuaikan nilainya dengan rasa anda, kerana ia menentukan titik di mana kaki muncul atau hilang semasa pengguna sedang menatal ke bawah atau ke atas. Berikan nilai yang sama untuk margin bawah artikel, supaya terdapat ruang yang cukup di bahagian bawah untuk mendedahkan kaki penuh. Sekarang kita perlukan pembukaan seterusnya bahagian bawah artikel di mana kita dapat melihat pengaki kaki yang meluncur ke bawah dan ke atas. Untuk mencapai matlamat ini, gantikan The Akhirnya, mari letakkan kaki di belakang artikel itu menggunakan Dan itu sahaja, elemen halaman individu dengan kesan mendedahkan atas tatal telah dilakukan. Semak pen Codepen di bawah. Anda juga boleh mencari kedua-dua kes penggunaan pada halaman Github kami. dan untuk semantik. Walau bagaimanapun,
Tetap menatal sehingga anda melihat footer
tag oleh menetapkan margin kepada 0, dan menjadikannya cukup lama menambah ketinggian tersuai untuk mendorong menatal (jika kandungan badan di laman anda cukup lama untuk menyebabkan penggilapan, anda tidak perlu memberikan ketinggian).lebar dan ketinggian) kepada footer, dan menetapkan kedudukannya ke bahagian bawah skrin dengan kedudukan: tetap; dan bawah: 0; hartanah. badan font-family: Crimson Text; saiz fon: 13pt; margin: 0; footer width: 100%; ketinggian: 200px; kedudukan: tetap; bawah: 0; latar belakang-warna: # DD5632;
2. Sembunyikan Footer
z-indeks: -1 memerintah ke footer agar letakkannya di belakang semua elemen lain pada halaman. dan tag putih untuk tutup kaki. badan, html background-color: #fff; footer width: 100%; ketinggian: 200px; kedudukan: tetap; bawah: 0; latar belakang-warna: # DD5632; z-indeks: -1;
3. Laraskan Margin Bawah
margin-bottom daripada tag sama dengan ketinggian kaki (dalam contoh saya 200px). badan ketinggian: 1000px; margin: 0; margin-bottom: 200px;
Elemen Halaman Individu
1. Buat Artikel Panjang
dan .
Perkara 1
artikel lebar: 500px; warna latar belakang: # FEF9F3; padding: 20px 40px; artikel> footer ketinggian: 100px; warna latar belakang: # FE0178; badan font-family: garamond cormorant;
2. Buat Footer Sticky
kedudukan: melekit memerintah ke footer, jadi ia akan bergerak di dalam batas-batas artikel tetapi masih mengekalkan kedudukannya pada skrin semasa pengguna menatal ke atas dan ke bawah. artikel> footer height: 100px; warna latar belakang: # FE0178; kedudukan: -webkit-sticky; kedudukan: melekit; bawah: 80px;
bawah: 80px peraturan membetulkan kedudukan footer 80px di atas bahagian bawah artikel. artikel lebar: 500px; warna latar belakang: # FEF9F3; padding: 20px 40px; margin-bottom: 80px;
3. Tambah Latar Belakang Sebahagian Telus
warna latar belakang daripada artikel dengan a kecerunan linear imej latar belakang, yang dari bahagian atas artikel ke bahagian atas footer adalah berwarna dengan warna latar belakang artikel itu, dan bahagian yang tinggal di bahagian bawah adalah dibuat telus. artikel lebar: 500px; padding: 20px 40px; latar belakang-imej: linier-kecerunan (bawah, # FEF9F3 calc (100% - 120px), telus 0); margin-bottom: 80px;
calc (100% -120px) Fungsi CSS mengira ketinggian penuh artikel itu tolak kaki. Dalam contoh saya, ia 120px (100px untuk ketinggian + 20px untuk padding).
4. Letakkan Footer Back
z-indeks: -1 Peraturan CSS. artikel> footer height: 100px; warna latar belakang: # FE0178; kedudukan: -webkit-sticky; kedudukan: melekit; bawah: 80px; z-indeks: -1;
