捲動的動態導覽列顏色
在您的專案中，您提到面臨導覽列向下捲動後取得背景顏色的問題。為了解決這個問題，我們可以實作一個根據滾動位置更改導覽列顏色的解決方案。
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中文網其他相關文章！
