如何讓滾動的jQuery更改導航顏色？

我正在研究此模板，並且我希望導航在用戶開始滾動後更改顏色。我一直在玩jQuery，到目前爲止我已經獲得了功能。但！我希望顏色能夠改變成非常特定的顏色，在這種情況下是HEX或RGBA顏色，而不僅僅是標準的名稱顏色（即藍色，紅色，黑色等）。這是下面如何讓滾動的jQuery更改導航顏色？

$(document).ready(function() { 
      var a = $(".navbar").offset().top; 

      $(document).scroll(function(){ 
       if($(this).scrollTop() > a) 
       { 
        $('.navbar').css({"background":"black"}); 
       } else { 
        $('.navbar').css({"background":"none"}); 
       } 
      }); 
     });

我在哪裏更改名爲.css jQuery選擇的.navbar我的代碼，我怎麼可以改變背景顏色爲十六進制或RGBA，而不只是黑色或紅色或諸如此類的東西？我真的很難過。代碼運行良好，一旦用戶滾動瀏覽標題，它將顏色從透明變爲黑色，但我希望黑色是這個十六進制代碼＃04B297，我不確定如何繼續。任何指針？

非常感謝提前！

來源

2016-12-04 Stephen M

嘿。我的答案是否解決了您的問題？ –

首先我會將css聲明從background更改爲background-color。隨着background你改變任何其他背景屬性，你可能有像background-size，background-position等

既然你只是想從一個預定義的CSS顏色，一個十六進制顏色的去你根本只是把裏面的值就像你使用black一樣。

注：您還需要從none在else塊來改變你的CSS聲明transparent爲none不是一個正確的背景顏色值。

$(document).ready(function() { 
 
    var a = $(".navbar").offset().top; 
 

 
    $(document).scroll(function(){ 
 
    if($(this).scrollTop() > a) { 
 
     $('.navbar').css({"background-color":"#04B297"}); 
 
    } else { 
 
     $('.navbar').css({"background-color":"transparent"}); 
 
    } 
 
    }); 
 
});

html, 
 
body { 
 
    height: 1000px; 
 
} 
 

 
.navbar { 
 
    border: 1px solid black; 
 
    height: 60px; 
 
} 
 

 
.navbar--dark { 
 
    background-color: #04B297 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="navbar"></div>

我建議通過將這些顏色狀態，以自己的修飾符的類。你會獲得一點性能提升，而且它更具可管理性。有了這個，您可以簡單地使用toggleClass()來切換深色背景色。第二個參數是它用來確定何時切換的基於布爾的值。

$(document).ready(function() { 
 
    var a = $(".navbar").offset().top; 
 
    
 
    $(document).scroll(function(){ 
 
    $('.navbar').toggleClass('navbar--dark', $(this).scrollTop() > a); 
 
    }); 
 
});

html, 
 
body { 
 
    height: 1000px; 
 
} 
 

 
.navbar { 
 
    border: 1px solid black; 
 
    height: 60px; 
 
} 
 

 
.navbar--dark { 
 
    background-color: #04B297 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="navbar"></div>

來源

2016-12-04 05:21:40

這工作就像一個魅力，雖然不能讓我的CSS中的類工作，但jQuery本身是完美的！非常感謝！ –

好聽！不要忘記標記爲正確的。 –

使用道具（）而不是CSS

$(document).ready(function() { 
      var a = $(".navbar").offset().top; 

      $(document).scroll(function(){ 
       if($(this).scrollTop() > a) 
       { 
        $('.navbar').prop({"background","#FFF000"}); 
       } else { 
        $('.navbar').prop({"background","#333333"}); 
       } 
      }); 
     });

來源

2016-12-04 05:33:12

只能改變你的腳本，你寫你的在線CSS

$('.navbar').css({"background":"black"});

變化

background=>background-color

來源

2016-12-04 05:51:53

上面提到的一些好主意。另一種方法是使用導航欄：

路線

因爲那麼它呈現給用戶您在哪裏他們都在你的應用程序/網站的意圖。

<a class="navbar-brand page-scroll" href="#page-top"> 
       <img src="img/conceptco_home_logo.png" /> 
      </a>

請注意錨標記＃頁面頂部路線。

<body id="page-top">

這就是路線將帶你去的地方。如果您的網址中包含＃page-top，那麼如果您在JQuery中的定位標記上執行了單擊事件，那麼該頁面將自動滾動到那裏，然後它將移動到該位置。

對於顏色，你可以有一個表示不同顏色的CSS類，然後在Jquery中添加/刪除css屬性。

這裏是一個在GitHub repository的工作示例

來源

2016-12-04 06:14:42 leeroya

如何讓滾動的jQuery更改導航顏色？

回答

相關問題