Bagaimanakah cara membuat bar navigasi melekit yang melekat pada bahagian atas apabila menatal?

Membuat Bar Navigasi Melekit yang Melekat pada Bahagian Atas semasa Menatal

Masalah:

Reka bentuk bar navigasi yang diletakkan di bahagian bawah halaman yang boleh dilihat pada mulanya. Apabila pengguna menatal ke bawah, bar navigasi naik sehingga ia betul di bahagian atas halaman.

Penyelesaian:

Penyelesaian melibatkan penggunaan jQuery dan JavaScript untuk mengubah kedudukan bar navigasi berdasarkan tatal kedudukan.

Pelaksanaan:

1. HTML:

   <div>

2. CSS:

   #banner {
     height: 273px;
   }
   
   #nav_bar {
     height: 30px;
   }
   
   $(document).ready(function() {
     $(window).scroll(function () {
       if ($(window).scrollTop() > 550) {
         $('#nav_bar').addClass('navbar-fixed-top');
       }
       if ($(window).scrollTop() < 551) {
         $('#nav_bar').removeClass('navbar-fixed-top');
       }
     });
   });

Lagi Nota:

• Laraskan nilai dalam JavaScript (550 dan 551) untuk memadankan kedudukan tatal yang tepat di mana bar navigasi harus diperbaiki.
• Penyelesaian ini boleh digunakan pada elemen lain yang perlu kekal tetap pada kedudukan tatal tertentu.

Atas ialah kandungan terperinci Bagaimanakah cara membuat bar navigasi melekit yang melekat pada bahagian atas apabila menatal?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!