Bagaimana untuk Mengubah Warna Bar Navigasi secara Dinamik pada Tatal?

Cara Menukar Warna Bar Navigasi Semasa Menatal

Masalah:

Menetapkan latar belakang lutsinar warna untuk bar navigasi tidak berfungsi apabila halaman ditatal, menghasilkan warna latar belakang yang baharu digunakan.

Penyelesaian:

Untuk menukar warna bar navigasi selepas menatal, ikut langkah berikut:

1. Tambahkan JavaScript pada Ketua:

   $(function () {
     $(document).scroll(function () {
       var $nav = $(".navbar-fixed-top");
       $nav.toggleClass('scrolled', $(this).scrollTop() > $nav.height());
     });
   });

2. Tambah CSS untuk Menggayakan Bar Navigasi:

   .navbar-fixed-top.scrolled {
     background-color: #fff !important;
     transition: background-color 200ms linear;
   }

Pelaksanaan:

Kod JavaScript memantau penatalan halaman. Sebaik sahaja tatal melebihi ketinggian bar navigasi, ia menambah kelas yang dinamakan tatal ke bar navigasi. Kod CSS menggayakan bar navigasi dengan warna latar belakang putih apabila kelas yang ditatal hadir. Ini menukar warna latar belakang dengan lancar melebihi 200 milisaat.

Penyelesaian ini membolehkan anda menetapkan warna latar belakang lutsinar untuk bar navigasi apabila ia tidak ditatal dan menukar warna latar belakang kepada putih apabila menatal berlaku.

Atas ialah kandungan terperinci Bagaimana untuk Mengubah Warna Bar Navigasi secara Dinamik pada Tatal?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!