Bagaimanakah Saya Boleh Mengubah Warna Bar Navigasi Saya Secara Dinamik Berdasarkan Kedudukan Tatal?

Warna Bar Navigasi Dinamik dengan Tatal

Dalam projek anda, anda menyebut menghadapi isu di mana bar navigasi memperoleh warna latar belakang selepas menatal ke bawah . Untuk menyelesaikan masalah ini, kami boleh melaksanakan penyelesaian yang mengubah warna navbar berdasarkan kedudukan tatal.

Pelaksanaan JavaScript:

Untuk mencapai ini, tambah kod JavaScript berikut ke pengepala fail HTML anda:

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

Skrip ini sentiasa memantau kedudukan skrol. Apabila nilai atas tatal melebihi ketinggian bar navigasi, ia menambah kelas yang dipanggil "menatal" pada bar navigasi, mencetuskan perubahan warna.

Penggayaan CSS:

Kepada kemas kini warna navbar, buat helaian gaya dan masukkan CSS berikut:

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

The Nilai "#fff" boleh disesuaikan dengan warna pilihan anda. Apabila kelas "menatal" digunakan pada bar navigasi, warna latar belakangnya akan beralih kepada putih dengan lancar.

Contoh:

Untuk menggambarkan kefungsian, anda boleh merujuk kepada JsFiddle berikut:

[JsFiddle Link]

Contoh ini menunjukkan bagaimana navbar bertukar putih selepas menatal ke bawah. Dengan melaksanakan penyelesaian ini, anda boleh menukar warna bar navigasi anda secara dinamik berdasarkan kedudukan tatal.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengubah Warna Bar Navigasi Saya Secara Dinamik Berdasarkan Kedudukan Tatal?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!