滾動更改標題背景

我試圖更改滾動頁面的標題背景。我正在使用下面的代碼。 JS正在工作，當滾動大於100px時，我可以看到不透明的類被添加到HMTL中的元素。問題是，這個類沒有被隨後在CSS中調用。滾動更改標題背景

這裏的HTML：

<header> 
    <div id="logo">logo</div> 
    <div id="nav-wrapper"> 
     <nav> 
      nav 
     </nav> 
    </div> 
    <div class="clear"></div> 
</header> 
<script> 
$(window).on("scroll", function() { 
    if ($(this).scrollTop() > 100) { 
     $("header").addClass("not-transparent"); 
    } 
    else { 
     $("header").removeClass("not-transparent"); 
    } 
}); 
</script>

這裏的CSS

header { 
    width:100%; 
    position:fixed; 
    top:0px; 
    z-index:3; 
} 
header.not-transparent { 
    background: #252525;  
}

來源

2015-02-07 C-M

您可以在其標題類中使用背景顏色，而不是在下面完成。 – user254153 2015-02-07 13:49:11

由於在滾動腳本時繼續添加類（「不透明」），滾動不斷被觸發。 jQuery足夠聰明，可以讓它只發生一次。其他代碼可能需要更多的邏輯。 – Mouser 2015-02-07 13:50:55

您也可以使用CSS屬性它。

<script> 
$(window).on("scroll", function() { 
    if ($(this).scrollTop() > 100) { 
     $("header").css("background","#252525"); 
    } 
    else { 
     $("header").css("background","#fff"); 
    } 
}); 
</script>

請確保您的子div背景設置爲透明，以便您可以看到父div背景。

來源

2015-02-07 13:52:02 user254153

我喜歡這種方法。有沒有辦法讓它在優雅中淡出？ – 2015-02-07 18:01:17

你可以使用CSS轉換效果。看它。 – user254153 2015-02-07 18:09:35

由於某種原因，這個答案doesent改變我的導航欄的背景（即時通訊使用固定頂部的導航欄）形式bootstrap ...任何想法爲什麼？ – weinde 2017-12-05 13:23:09

滾動更改標題背景

回答

相關問題