如何根據捲動位置動態變更導覽列的顏色？

捲動的動態導覽列顏色

在您的專案中，您提到面臨導覽列向下捲動後取得背景顏色的問題。為了解決這個問題，我們可以實作一個根據滾動位置更改導覽列顏色的解決方案。

JavaScript 實作：

要實現此目的，請新增以下JavaScript 程式碼新增至HTML 檔案的標題：

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

此腳本持續監視滾動位置。當scrolltop值超過導覽列的高度時，它會向導覽列新增一個名為「scrolled」的類，從而觸發顏色變化。

CSS樣式：

To更新導覽列的顏色，建立樣式表並包含以下CSS：

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

The “#fff”值可以客製化為您喜歡的顏色。當「scrolled」類別應用於導覽列時，其背景顏色將平滑過渡為白色。

範例：

為了說明功能，您可以參考以下JsFiddle:

[JsFiddle 連結]

這個範例了示範如何向下捲動後導覽列變成白色。透過實作此解決方案，您可以根據捲動位置有效地動態變更導覽列的顏色。

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