jquery scroll to a px count from top and then set a div to be fixed from the top for the rest of the scroll

Question

I am looking to change a div's css when i scroll to a certain point down the page, a certain amount of pixels from the top of the page.

On page load i would have a div positioned statically. Once I started to scroll down the page and i hit a point from the top (say 100px for demo purposes) i want to change that static div to become fixed like 20px from the top. Which would be done via the css() property of jquery. THis would allow it to stay at that fixed 20px all the way down the page.

What jquery property can i use to know when i hit that 100px mark. I want this to also revert once someone gets back to the top so that the div is put back to where it was when the page loaded and not 20px from the top.

Any ideas?

Answer 1

You could use the scroll() event to run the code, and the scrollTop() method to see where you are.

Here's a demo: http://jsfiddle.net/EahRx/

(I used the values you provided, so there's a jump. I'm sure it will look better in your actual page.)

var fixed = false;

$(document).scroll(function() {
    if( $(this).scrollTop() >= 100 ) {
        if( !fixed ) {
            fixed = true;
            $('#myDiv').css({position:'fixed',top:20}); // Or set top:20px; in CSS
        }                                           // It won't matter when static
    } else {
        if( fixed ) {
            fixed = false;
            $('#myDiv').css({position:'static'});
        }
    }
});

The fixed variable prevents the .css() code from running more times than it needs to.