如何更改滾動導覽列背景顏色？

修改導覽列滾動後顏色

問題：

如何刪除背景最初來自導航欄的顏色，然後在滾動後添加新顏色發生？

場景：

相關網站 https://attafothman.olympe.in/ 的頂部有一個黑色導航欄，應保持固定位置。但是，當向下捲動到某個 div 下方時，導覽列會自動取得新的背景顏色。

解決方案：

要解決此問題，可以結合使用JavaScript 和CSS是

JavaScript：

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

此JavaScript 程式碼在捲動時觸發事件偵聽器。當捲動位置超過導覽列的高度時，它會向元素新增一個名為「scrolled」的自訂 CSS 類別。

CSS:

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

此 CSS規則定義「滾動」類別的行為。一旦添加了“scrolled”類，它就會為具有“navbar-fixed-top”類的元素分配純白色背景色。 '!important' 關鍵字確保此規則覆蓋任何衝突的樣式。

以上是如何更改滾動導覽列背景顏色？的詳細內容。更多資訊請關注PHP中文網其他相關文章！