Often times if a page scrolls too far down, the user can lose sight of navigation elements or the shopping cart which may be located on the sidebar. Sure, you could affix the sidebar using “position:fixed” but we all know the headaches that can cause with cross-browser compatibility. Not to mention, it doesn’t account for the space used for the header. Using “position:fixed”, an element would stay in that exact position the whole time.
Enter the StaticScroller MooTools extension. Using this simple class, any element can be made to hover in a single position if the user scrolls past it. However, before the user scrolls past the element, it will remain in its normal position.
This is rather difficult to describe. Some things are best shown.
View the demo
Download the code
Requires: MooTools Core 1.2
Example usage:
<script type="text/javascript">
window.addEvent("domready", function() {
new StaticScroller("container", {offset:10});
}
</script>