Bagaimanakah Saya Boleh Menghidupkan atau Mengecilkan Navbar Bootstrap Saya pada Tatal?

Animasikan/Kecilkan NavBar pada Tatal Menggunakan Bootstrap

Mengawal gelagat NavBar pada tatal boleh meningkatkan pengalaman pengguna di tapak web anda. Bootstrap menawarkan penyelesaian untuk ini menggunakan pelbagai kaedah.

Bootstrap 5:

Bootstrap 5 memperkenalkan kelas sticky-top, yang memberikan kesan yang serupa dengan komponen Affix sebelumnya. Ia membetulkan NavBar di bahagian atas halaman semasa menatal. Walau bagaimanapun, ia tidak mencetuskan peristiwa untuk menukar gaya NavBar apabila ia menjadi tetap. Untuk mencapai ini, JavaScript diperlukan. Satu pendekatan ialah menggunakan IntersectionObserver.

Bootstrap 4:

Dalam Bootstrap 4, komponen Affix tidak tersedia. Untuk membuat NavBar melekit, gunakan kedudukan: sifat melekit (tidak disokong dalam semua penyemak imbas). Ini akan melekatkan NavBar ke bahagian atas, tetapi anda perlu menggunakan JavaScript untuk menogol gaya NavBar apabila ia menjadi melekit. IntersectionObserver atau plugin jQuery seperti ScrollPos-Styler boleh digunakan untuk tujuan ini.

Kaedah Tambahan:

Sebagai alternatif, anda boleh menggunakan jQuery's $(window).scroll( ) berfungsi untuk menukar gaya NavBar pada kedudukan tatal tertentu. Pendekatan ini sesuai apabila anda mengetahui kedudukan tepat di mana NavBar harus berubah.

Contoh Pelaksanaan:

• [Sticky Top Navbar - IntersectionObserver Demo](https ://codepen.io/ChristianMartinelli/pen/jLLYEa)
• [Sticky Top Navbar - Demo jQuery](https://codeply.com/go/62Roy6RDOa)

Untuk lebih banyak contoh dan butiran, rujuk ini sumber:

• https://getbootstrap.com/docs/5.1/components/navbar/#sticky-top
• https://codeply.com/go/62Roy6RDOa
• https://www.itsolutionstuff.com/post/beautiful-sticky-navbar-using-bootstrap-4-with-jquery-javascript-example.html

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