Bagaimana untuk Mengubah Warna Navbar secara Dinamik pada Tatal?

Perubahan Warna Navbar Dinamik Semasa Menatal

Mencapai bar navigasi tanpa warna latar belakang pada mulanya dan menukar warnanya secara progresif selepas menatal memerlukan gabungan JavaScript dan CSS pengubahsuaian.

JavaScript:

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

Kod ini menyemak kedudukan skrol menegak dokumen. Jika ia melebihi ketinggian navbar, ia menukar kelas "menatal" ke elemen navbar.

CSS:

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

Kod CSS ini mentakrifkan penampilan daripada bar navigasi dengan kelas "menatal". Ia menggunakan warna latar belakang putih dan kesan peralihan yang lancar semasa menukar warna.

Pelaksanaan:

Dengan menambahkan kod JavaScript yang disediakan pada kepala dokumen HTML anda dan kod CSS ke helaian gaya anda, anda boleh melaksanakan perubahan warna bar navbar dinamik ini dengan mudah. Apabila pengguna menatal ke bawah halaman, bar navigasi akan beralih secara beransur-ansur kepada warna latar belakang yang diingini.

Rujukan:

Untuk demonstrasi langsung, rujuk JSFiddle berikut: [JSFiddle](https://jsfiddle.net/qe9L725y/).

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