jQuery floatScroll

Last updated: 2011/12/30

Scroll down to see it in action!

This is a jQuery extension I wrote to generically fix HTML elements to a page when the user scrolls past them. To see what I mean, scroll down on this page.

I noticed that there was no extension that did this smoothly and for any element on a page, so I decided to write it myself. There are several test cases available. I've tested this in Chrome, Firefox, IE7, IE8, IE9, and Safari. If any of the test cases don't work in a browser you think they should work in, please report a bug.

View and download on Github

Usage

To apply this behavior to an element or set of elements, just include jquery.floatScroll.js in the page and do the following:

$('.my-elements').floatScroll(options)

where options is an optional hash consisting of:

positionTop: defaulted to 0. Sets how far from the top of the browser window the elements should float.
placeholderClass: defaulted to 'scrollPlaceholder'. The class of the placeholder element injected into the DOM so the page doesn't lose its fundamental layout.
zIndex: defaulted to 100000. Sets the CSS z-index of the elements when they are floated.