Bagaimanakah Saya Boleh Menukar Warna Latar Belakang Navbar Saya pada Tatal?

Perubahan Warna Bar Nav Dinamik semasa Menatal

Tingkatkan pengalaman navigasi tapak web anda dengan mengubah warna bar navigasi semasa anda menatal ke bawah halaman . Dalam soalan ini, pengguna mendapatkan panduan untuk mengalih keluar warna latar belakang bar navigasi pada mulanya dan kemudian menggunakan warna apabila menatal melepasi div tertentu.

Penyelesaian:

Penyelesaian itu melibatkan gabungan JavaScript dan CSS. Mula-mula, tambahkan kod JavaScript berikut pada bahagian kepala dokumen HTML anda:

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

Kod JavaScript ini memantau kedudukan skrol tetingkap dan menogol kelas "menatal" pada bar navigasi apabila skrol melebihi navigasi- ketinggian bar.

Seterusnya, tambahkan kod CSS berikut pada anda stylesheet:

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

CSS ini memastikan bahawa apabila kelas "menatal" digunakan pada nav-bar, warna latar belakangnya bertukar kepada putih (#fff) dengan peralihan lancar melebihi 200 milisaat.

Dengan melaksanakan penyelesaian ini, anda boleh mencipta bar navigasi dinamik yang meningkatkan pengalaman pengguna dengan memberikan isyarat visual semasa mereka menatal halaman kandungan.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menukar Warna Latar Belakang Navbar Saya pada Tatal?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!