Bagaimana untuk Menukar Warna Latar Belakang Navbar pada Tatal?

Mengubah suai Warna Navbar Pasca Tatal

Soalan:

Bagaimana anda boleh mengalih keluar latar belakang warna daripada bar navigasi pada mulanya dan kemudian tambah warna baharu setelah menatal berlaku?

Senario:

Tapak web yang dimaksudkan, https://attafothman.olympe.in/, menampilkan bar navigasi hitam di bahagian atas yang sepatutnya mengekalkan kedudukan. Walau bagaimanapun, apabila menatal ke bawah di bawah div tertentu, bar nav secara automatik memperoleh warna latar belakang baharu.

Penyelesaian:

Untuk menangani isu ini, gabungan JavaScript dan CSS ialah bekerja.

JavaScript:

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

Kod JavaScript ini mencetuskan pendengar acara pada skrol. Apabila kedudukan tatal melebihi ketinggian bar navigasi, ia menambahkan kelas CSS tersuai yang dinamakan 'menatal' pada elemen.

CSS:

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

CSS ini peraturan mentakrifkan kelakuan kelas 'menatal'. Ia memberikan warna latar belakang putih pepejal kepada elemen dengan kelas 'navbar-fixed-top' sebaik sahaja kelas 'menatal' ditambah. Kata kunci '!penting' memastikan bahawa peraturan ini mengatasi mana-mana gaya yang bercanggah.

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