Sometimes you want to alternate between fixed and normal flow for elements. Think of a sidebar that scrolls with the page from a certain point and stops at another. The CSS property
position: sticky; is on the way but until we can rely on that, here’s a solution with jQuery Waypoints that makes it “easy to execute a function whenever you scroll to an element”.
As easy as it might be it can still be confusing to know exactly how to stop a fixed element from scrolling on
Here’s a working example: http://jsfiddle.net/oskarrough/SFyCj/
Basically, it works like this:
- Define a waypoint for the sticky element (use the ‘sticky’ shortcut method that the plugin provides)
- Define a waypoint for the element that should stop the sticky element
- Adjust the second waypoint with the offset.top for the element minus the height of the sticky element.
But check the example, I’ve made sure there are lots of comments.