用滚动更改元素的背景

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/