Question

I want to keep an element always visible, even when it should be scrolled out by the user.

1) On Body Load                     2) After scrolling down
-------------------------           -------------------------
                                     ____________
                                    |            |
                                    |            |
                                    |            |
                                    |            |
                                    |____________|

 ____________
|            |
|            |
|            |
|            |
|____________|

Basically I want to change the element’s position to fixed when it’s less than 20px from the top (2) and change it’s position back to static when it’s farther than 20px from the top (1).

There are plugins that do the trick like E.G: http://www.vertstudios.com/blog/demo/stickyscroller/demo.php but if it isn’t too difficult to do manually I prefer avoiding them.

How do I create a listener that fires when the element is near the top and one that fires when its far from it?

Answer 1

Will need one css class and rules to make that class fixed. If classs not applied your normal css would set absolute

 var $div = $('#mydiv');
$(window).on('scroll', function() {       
      var  changeClass = false,
        is_fixed = $div.hasClass('fixedClass');

    if ($(this).scrollTop() > 20) {
        changeClass = is_fixed ? false : true;
    } else {
        changeClass = is_fixed ? true : false;
    }
    if (changeClass) {
        $div.toggleClass('fixedClass');
    }

})

Can write this with shorter code but since scrolling triggers event many times a second, checking if class already exists or not cuts out a lot of extra manipulating DOM