Background change color when scrolling

JavaScript
1

I have a header element with a semi-transparent background that I would like to change to a solid color when the user scrolls by a specific point on a page.

Any recommendations?

2

The code I try:

<!DOCTYPE html>
<html>
<head>
<style>
body {
    width: 5000px;
 
}
</style>
</head>
<body onscroll="scrollWin()">

<p id="ad" style="background-color:pink; " >p element background change, when scrollbar scroll.</p>


<script>
//http://www.sitepoint.com/community/t/background-change-color-when-scrolling/200302

//http://www.w3schools.com/jsref/met_win_scrollto.asp
//http://www.w3schools.com/jsref/met_win_scrollby.asp
//http://www.w3schools.com/jsref/obj_window.asp
//http://www.w3schools.com/jsref/prop_win_pagexoffset.asp
//http://www.w3schools.com/jsref/dom_obj_event.asp
//http://www.w3schools.com/jsref/event_onscroll.asp


function scrollWin() {
    //window.scrollTo(500, 0);

//alert('window.pageXOffset= '+window.pageXOffset + '\nwindow.pageYOffset='+ window.pageYOffset);

var el= document.getElementById('ad');
if(window.pageXOffset >= 500){   
el.style.backgroundColor='turquoise';
}
if(window.pageXOffset < 500){   
el.style.backgroundColor='pink';
}
}
</script>

</body>
</html>
3

I wound up using something like this:


        jQuery(window).scroll(function() {    
            var scroll = jQuery(window).scrollTop();
        
            if (scroll >= 150) {
                jQuery("header").addClass("black");
            } else {
                jQuery("header").removeClass("black");
            }
        });
4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.