Question

With the jquery.waypoints plugin you can easily create sticky elements. Its sticky elements demo shows a navbar that is by default positioned a little below the top of the page, then with following behaviour:
a) as the user scrolls down and the navbar hits the top of the viewport it sticks there
b) when the user scrolls back up to the top of the page the navbar returns to its normal position.

I’m trying to do something similar but somewhat reversed, which is the exact same effect as the scribd navbar. Start from the very bottom of this scribd page and scroll up slowly to see the effect.

How is this done? I’m assuming waypoints would facilitate it. Thanks.

Answer 1

Here’s a solution I figured out, but still interested in other implementations.

js:

//#bottomOfEl is the element you want to stick to the bottom of
$("#bottomOfEl").waypoint(function(ev, dir){ 
    $("#navbar").toggleClass('sticky', dir === "up");
    ev.stopPropagation();
}, {
    offset: function() {return $.waypoints('viewportHeight') 
                                - $(this).height() 
                                - $("#navbar").height();
            } 
})   

css:

#navbar {
    height: 40px;
    width: 500px;
    z-index: 10;
}
.sticky { 
    position: fixed;
    bottom: 0px;
}