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


Answers

Try using scrollTop:

$(window).scroll(function(){
    if  ($(window).scrollTop() >= 100){
        //CSS changes go here
    }
});
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?







You can use the slimcroll in jquery. Example:

  // Add slimscroll to element
          $('#MyElementID').slimscroll({
              height : '1300px'
          });

To use it remember to add an referenece to the plugin, of where you have the class:

<script src="js/plugins/slimscroll/jquery.slimscroll.min.js"></script>




Tags