如何更改滾動導覽列的背景顏色？-css教學-PHP中文網

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

Barbara Streisand

發布： 2024-11-30 11:36:10

原創

999 人瀏覽過

How Can I Change My Navbar's Background Color on Scroll?

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

向下捲動頁面時改變導覽列顏色，增強網站的導覽體驗。在此問題中，使用者尋求指導以最初刪除導覽列的背景顏色，然後在捲動經過特定 div 時套用顏色。

解：

此解涉及 JavaScript 和 CSS 的組合。首先，將以下 JavaScript 程式碼新增至 HTML 文件的頭部：

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

登入後複製

此 JavaScript 程式碼監視視窗的捲動位置，並在捲動超出導覽列時切換導覽列上的「捲動」類別。欄的高度。

接下來，將以下CSS 程式碼加入樣式表中：

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

登入後複製

此CSS確保當「捲動」類別套用於導覽列時，其背景顏色變為白色(# fff)，並在200 毫秒內平滑過渡。

透過實作此解決方案，您可以建立動態導覽列透過在使用者捲動瀏覽頁面內容時提供視覺提示來增強使用者體驗。

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