Pierre Lartigau Pierre Lartigau - 13 days ago 7
HTML Question

Changing background of an element with scroll

I did a fiddle that well represent what i want to do.
Here's the problem :



#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>





The header is transparent, and if there is a lot of text in "content", scrolling make some text stack.

I read some Js solution with jQuery but that was outdated (2013), and also I'm bad at Js, and i can't manage to do what i want to do: I want to change the "header"'s background to white when the right scrolling distance is reached, where we have some struggles to read stacked text.

I need to use Html/Css, possibly Js, which i guess will be necessary.

Answer

If I understood your problem correctly, You are looking for #header to have background color white, when content reaches up to the header section.

In this case, you need to add a bit of jQuery code as follows.

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");
        }
    });
})

And Some minor CSS changes into your existing code. "added z-index: 1" and added one more class

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;
}

You can see this working fiddle here https://jsfiddle.net/swbbmkxw/1/