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

如何在捲動時更改導覽列顏色

問題：

問題：

設定透明背景頁面滾動時，導覽列的顏色不起作用，導致新的背景顏色

解決方案：

1. 要在滾動後更改導覽列顏色，請按照以下步驟操作：

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

將JavaScript 加入Head:

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

新增CSS 來設定導覽列樣式：

實作： JavaScript 程式碼監視頁面捲動。一旦捲動超過導覽列的高度，它就會向導覽列新增一個名為scrolled 的類別。當存在滾動類別時，CSS 代碼將導覽列設定為白色背景顏色。這可以在 200 毫秒內平滑地過渡背景顏色。 此解決方案可讓您在導覽列未捲動時設定透明背景顏色，並在捲動時將背景顏色變更為白色。

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