Background change color when scrolling

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?

The code I try:

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

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



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

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

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


I wound up using something like this:

        jQuery(window).scroll(function() {    
            var scroll = jQuery(window).scrollTop();
            if (scroll >= 150) {
            } else {

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