用滾動更改元素的背景

Question

我做了一個fiddle，它很好地代表了我想要做的事情。
這裏的問題：

#header { 
 
    position:fixed; 
 
    height:70px; 
 
    width:100%; 
 
    text-align:center; 
 
    line-height:70px; 
 
    font-size:28px; 
 
    box-shadow: 1px 1px 10px #555; 
 
    background:rgba(0,0,0,0); 
 
} 
 

 
.item { 
 
    float:right; 
 
    border:1px solid black; 
 
} 
 

 
#content { 
 
    position:absolute; 
 
    top:80px; 
 
}

<div id="header"> 
 
    Somethings good... 
 
    <div class="item"> 
 
     Item 1 
 
    </div> 
 
    <div class="item"> 
 
     Item 2 
 
    </div> 
 
    <div class="item"> 
 
     Item 3 
 
    </div> 
 
</div> 
 
<div id="content"> 
 
    <p>A lot of text that migh be interesting, if you pay attention to it</p> 
 
    <p>A lot of text that migh be interesting, if you pay attention to it</p> 
 
    <p>A lot of text that migh be interesting, if you pay attention to it</p> 
 
    <p>A lot of text that migh be interesting, if you pay attention to it</p> 
 
    <p>A lot of text that migh be interesting, if you pay attention to it</p> 
 
    <p>A lot of text that migh be interesting, if you pay attention to it</p> 
 
    <p>A lot of text that migh be interesting, if you pay attention to it</p> 
 
    <p>A lot of text that migh be interesting, if you pay attention to it</p> 
 
    <p>A lot of text that migh be interesting, if you pay attention to it</p> 
 
    <p>A lot of text that migh be interesting, if you pay attention to it</p> 
 
    <p>A lot of text that migh be interesting, if you pay attention to it</p> 
 
    <p>A lot of text that migh be interesting, if you pay attention to it</p> 
 
    <p>A lot of text that migh be interesting, if you pay attention to it</p> 
 
    <p>A lot of text that migh be interesting, if you pay attention to it</p> 
 
    <p>A lot of text that migh be interesting, if you pay attention to it</p> 
 
    <p>A lot of text that migh be interesting, if you pay attention to it</p> 
 
    <p>A lot of text that migh be interesting, if you pay attention to it</p> 
 
    <p>A lot of text that migh be interesting, if you pay attention to it</p> 
 
    <p>A lot of text that migh be interesting, if you pay attention to it</p> 
 
    <p>A lot of text that migh be interesting, if you pay attention to it</p> 
 
    <p>A lot of text that migh be interesting, if you pay attention to it</p> 
 
    <p>A lot of text that migh be interesting, if you pay attention to it</p> 
 
    <p>A lot of text that migh be interesting, if you pay attention to it</p> 
 
</div>

頭部是透明的，如果在「內容」大量的文字，滾動做一些文字堆棧。

我使用jQuery閱讀了一些Js解決方案，但那已經過時了（2013），而且我在Js上很糟糕，而且我無法做到我想做的事情：我想更改「標題」的當達到正確的滾動距離時白色的背景，我們有一些鬥爭閱讀堆疊的文本。

我需要使用Html/Css，可能是Js，我認爲這是必要的。

Answer 1

如果我正確地理解了您的問題，當內容到達標題部分時，您正在尋找#header以使背景色變爲白色。

在這種情況下，您需要添加一些jQuery代碼，如下所示。

JS

$(document).ready(function() { 
    $(window).on("scroll", function() { 
     if ($(window).scrollTop() > 20) { 
      $("#header").addClass("active"); 
     } else { 
      //remove the background property so it comes transparent again (defined in your css) 
      $("#header").removeClass("active"); 
     } 
    }); 
}) 

以及一些小的CSS改變到現有的代碼。 「添加的z-index：1」，並增加了一個類

CSS

#header { 
    position:fixed; 
    height:70px; 
    width:100%; 
    text-align:center; 
    line-height:70px; 
    font-size:28px; 
    box-shadow: 1px 1px 10px #555; 
    background:rgba(0,0,0,0); 
    z-index:1; 
} 

#header.active { 
    background:#fff; 
} 

你可以看到這方面的工作小提琴這裏https://jsfiddle.net/swbbmkxw/1/