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

Posted by estern on Stack Overflow See other posts from Stack Overflow or by estern
Published on 2011-01-04T19:51:03Z Indexed on 2011/01/04 19:53 UTC
Read the original article Hit count: 162

Filed under:
|
|
|

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?

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about css