使用滚动

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/