How could I make my header background turn white on scroll?

Question

I have been trying to achieve this during my learning process. I just started with javascript but everything is very blurry for me. How could i achieve this?enter image description here

here is the html

here is the css

It would be better to add your code as text instead of images. — N3R4ZZuRR0, Mar 14 '21 at 08:20
Please add the code you are linking to directly to your question... — dale landry, Mar 14 '21 at 08:21
Does this answer your question? [Capturing the "scroll down" event?](https://stackoverflow.com/questions/4670834/capturing-the-scroll-down-event) — N3R4ZZuRR0, Mar 14 '21 at 08:30

score 1 · Answer 1 · answered Mar 14 '21 at 08:23

1

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
window.onscroll = function (e) {  
// called when the window is scrolled.  
$("#myheader").css("background-color", "white");
}
</script>


<header id="myheader">This is my div.</div>

answered Mar 14 '21 at 08:23

Reşat Karaçöl

50
1
7

1

Seems a shame to load a whole library to achieve this. – A Haworth Mar 14 '21 at 08:58
He/She can fix :) i just gave an idea – Reşat Karaçöl Mar 14 '21 at 09:00

score -1 · Accepted Answer · answered Mar 14 '21 at 08:24

In your header HTML add header class, where you need to change the background.

Add this jquery for adding and removing class in scroll.

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();    
    if (scroll <= 500) { // change this 500 by your own need
        $(".header").addClass("lightHeader").removeClass("darkHeader");
    } else {
        $(".header").addClass("darkHeader").removeClass("lightHeader");
    }
}

Add this CSS:

.darkHeader {
   backgound-color: #000; //whatever color you want
}
.lightHeader {
   backgound-color: #fff; //whatever color you want
}

How could I make my header background turn white on scroll?

2 Answers2