Tuesday, July 24, 2012

jQuery Plugin to Scroll an Element with the Page

Updated 11/7/2013: Added support for positioning via padding instead of margins.

This simple javascript plugin is a very simple bit of code that can be attached to any element on a web page.  It will make the element work similar of a position:fixed element in that it will cause the element to scroll with the browser window vertically as the user scrolls up and down.

The benefit of this over the css attribute is that this method will retain the items original placement and flow instead simply adjust the margin-top to replicate the scrolling logic.  Additional paddingTop and paddingBottom can be specified witch will act as minimum margins between the viewport and the floating item.

Sample Code:

$("#element").autoScroll({ paddingTop: 30 });

The query Plugin code is available on GitHub here.  You will need to include jQuery and then this file in your page header to use it.

No comments: