Search code examples
jquerymedia-queries

changes elements while scrolling a body

I just want to changes elements like changing a header while scrolling the body tag just like this site http://www.engadget.com/.

I have tried it but in alerting me that the body is scrolled in a value that I set. So here's the code:

script:

$(document).ready(function() {

$("body").scroll( function() {
    var top = $(this).scrollTop();
    if(top > 147){
        alert("hey!");
    }
});

});

and the html:

<body>
<div style='height: 5000px;' ></div>
</body>

any ideas???

Solution

  • You need to attach the scroll event to the document not the body:

    $(document).scroll( function() {
    var top = $(this).scrollTop();
    if(top > 147){
        alert("hey!");
    }
});

    Working fiddle

    You can relace the alert() with the code to amend the DOM as required when the user has scrolled down the page.