Bagaimana untuk Menghidupkan atau Mengecilkan Navbar Bootstrap pada Tatal?

Cara Menghidupkan atau Mengecilkan Navbar pada Tatal Menggunakan Bootstrap

Mencari penyelesaian untuk menghidupkan atau mengecilkan bar navigasi apabila menatal selalunya boleh membawa kepada maklumat lapuk, terutamanya yang berkaitan dengan Bootstrap 3. Artikel ini memfokuskan kepada penyelesaian semasa untuk Bootstrap 4 dan 5.

Bootstrap 5

Bootstrap 5 mengekalkan kelas atas melekit untuk mencipta kesan navbar statik kepada tetap pada skrol. Sebagai alternatif, anda boleh menggunakan JavaScript IntersectionObserver untuk memantau elemen "pencetus" dan menggunakan kelas CSS pada bar navigasi apabila pencetus kelihatan. Kelas ini kemudiannya boleh mengandungi CSS yang diperlukan untuk melaraskan penampilan dan kedudukan bar navigasi.

Bootstrap 4

Memandangkan Bootstrap 4 tidak mempunyai komponen Affix, anda boleh menggunakan sticky- kelas atas untuk melekatkan navbar apabila ia mencapai bahagian atas. Walau bagaimanapun, kaedah ini sahaja tidak akan mencetuskan acara JavaScript untuk menunjukkan bila navbar diimbuhkan. Akibatnya, anda memerlukan JavaScript untuk memanipulasi gaya navbar setelah ia menjadi melekit. IntersectionObserver ialah pilihan yang sesuai untuk mengesan apabila elemen pencetus di atas bar navigasi mencapai port pandangan dan mencetuskan keadaan "melekit".

Alternatif jQuery

Selain menggunakan Bootstrap terbina- dalam fungsi, anda juga boleh menggunakan pemalam jQuery seperti ScrollPos-Styler atau menulis jQuery anda sendiri skrip untuk mengawal gaya navbar pada skrol. Satu pendekatan ialah mentakrifkan bar navigasi atas tetap dengan data-toggle="affix" dan menggunakan jQuery untuk menonton kedudukan tatal dan togol kelas .affix secara bersyarat.

Sumber Tambahan

• [Sticky Top Navbar - IntersectionObserver Demo](https://codepen.io/pdreier/pen/QWNYrrZ)
• [Sticky Top Navbar - jQuery Demo](https://codeply.com/go/62Roy6RDOa)
• [Lagi Bootstrap 4 Tukar Gaya Navbar pada Tatal Contoh](https://wrapbootstrap.com/theme/change-navbar-style-on-scroll-bootstrap-147)

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