I love Twitter’s Bootstrap framework. I don’t think I say that enough. It makes structuring beautiful websites extremely easy and quick. Their JavaScript framework makes it so much simpler to implement most commonly used animations. It does so by adding a few jQuery plugins that can be invoked by making additions to the markup or with some minimal scripting.

One such plugin is Affix that comes in the standard compiled bootstrap.js file or as affix.js if you prefer compiling them yourself. It allows dynamically changing the position of an element based on the scroll position. All you have to do include the attributes data-spy="affix" and data-offset-top="xx" and optionally data-offset-bottom="yy" where xx and yy are numerical values in pixels of your top and bottom offsets. It works by comparing how far you’ve scrolled the document.