如何動態變更捲軸上的導覽列顏色？

捲動時動態改變導覽列顏色

實現導覽列最初沒有背景顏色並在捲動後逐漸改變其顏色需要結合JavaScript和CSS修改。

JavaScript:

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

此程式碼檢查文件的垂直捲動位置。如果它超過導覽列的高度，則會將「捲動」類別切換到導覽列元素。

CSS：

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

此 CSS 程式碼定義外觀具有「捲動」類別的導覽列。它在更改顏色時應用白色背景色和平滑過渡效果。

實作：

透過將提供的JavaScript 程式碼新增至HTML 文件的頭部並將CSS程式碼新增至您的樣式表中，您可以輕鬆實現這種動態導覽列顏色變化。當使用者向下捲動頁面時，導覽列會逐漸過渡到所需的背景顏色。

參考：

有關現場演示，請參考以下 JSFiddle： [JSFiddle](https://jsfiddle.net/qe9L725y/).

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