Bagaimanakah Saya Boleh Mencipta Navbar Yang Menghidupkan/Mengecut pada Tatal Menggunakan Bootstrap?

Animasikan/Kecilkan Navbar pada Tatal Menggunakan Bootstrap

Mencipta navbar yang mengecut pada tatal ialah elemen reka bentuk popular yang meningkatkan pengalaman pengguna dengan mengoptimumkan ruang pada skrin yang lebih kecil. Begini cara anda boleh mencapainya dengan Bootstrap:

Bootstrap 5

Bootstrap 5 memperkenalkan kelas atas melekit, yang membolehkan anda mencipta bar navigasi statik kepada tetap kesan. Cuma tambah sticky-top pada elemen navbar anda, dan ia akan melekat pada bahagian atas viewport apabila halaman menatal.

Bootstrap 4

Menggunakan Kedudukan : Sticky

1. Tambahkan kelas sticky-top anda elemen navbar.
2. Tentukan CSS untuk menukar kedudukan navbar, padding dan latar belakang apabila ia menjadi melekit.
3. Gunakan JavaScript untuk mengesan apabila navbar mencapai bahagian atas viewport dan gunakan kelas sticky .

Menggunakan IntersectionObserver API

1. Buat elemen pencetus untuk menunjukkan bila navbar sepatutnya menjadi melekit.
2. Gunakan IntersectionObserver API untuk melihat elemen pencetus ini.
3. Bila elemen pencetus menjadi kelihatan, gunakan kelas melekit pada navbar menggunakan JavaScript.

Menggunakan jQuery

1. Lampirkan pengendali acara JavaScript pada acara skrol tetingkap.
2. Semak kedudukan skrol semasa dan gunakan kelas CSS yang sesuai untuk navbar.

Contoh Menggunakan jQuery

<nav class="navbar navbar-inverse bg-inverse fixed-top">
    <!-- your navbar markup -->
</nav>

<script>
$(window).scroll(function() {
    if ($(document).scrollTop() > 100) {
        $('.navbar').addClass('sticky-top');
    } else {
        $('.navbar').removeClass('sticky-top');
    }
});
</script>

Nota Tambahan

• Bootstrap 4 menghentikan imbuhkan komponen, jadi disyorkan untuk menggunakan kaedah di atas sebaliknya.
• Anda mungkin perlu melaraskan CSS dan JavaScript agar sesuai dengan keperluan reka bentuk khusus anda.
• Terokai tunjuk cara dan contoh yang dirujuk untuk mendapatkan inspirasi dan panduan pelaksanaan.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencipta Navbar Yang Menghidupkan/Mengecut pada Tatal Menggunakan Bootstrap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!