jquery-scroll-follow: A JavaScript repository from phyer

#jQuery Scroll Follow

Feedback is welcome and appreciated: http://getsatisfaction.com/netperspective/products/netperspective_jquery_scroll_follow

OVERVIEW

Scroll Follow is a simple jQuery plugin that enables a DOM object to follow the page as the user scrolls. Scroll Follow has been successfully tested on IE6, IE7, FF2, FF3, Safari 3, and Opera 9 on Windows. It has been successfully tested on FF3 and Safari 3 on MacOSX.

REQUIREMENTS

jQuery (tested with 1.9.1)
jQuery UI Core (tested with 1.10.1)

OPTIONAL

jQuery Easing Plugin
jQuery Cookie Plugin

INSTALLATION

Include jQuery:

<script type="text/javascript" src="jquery.js"></script>

Include required plugins, including Scroll Follow:

<script type="text/javascript" src="ui.core.js"></script>
<script type="text/javascript" src="jquery.scrollFollow.js"></script>

Call Scroll Follow on the desired DOM object:
View Example

<script type="text/javascript">
  $( '#example' ).scrollFollow();
</script>

Or call Scroll Follow on the desired DOM object and give it some parameters:
View Example

<script type="text/javascript">
 $( document ).ready( function () {
   $( '#example' ).scrollFollow( {
    speed: 1000,
    offset: 60,
    killSwitch: 'exampleLink',
    onText: 'Disable Follow',
    offText: 'Enable Follow'
   } );
 } );
</script>

The Scroll Follow object will remain inside its immediate container.
View Example
Or you can specify a parent (by ID) for the Scroll Follow object to consider its container:
View Example

<script type="text/javascript">
 $( document ).ready( function () {
  $( '#example' ).scrollFollow( {
   container: 'outer'
  } );
 } );
</script>

Scroll Follow uses the "top" property of an object to slide it. Therefore, the "position" of the object must be set to either "relative" or "absolute." Other than that limitation, the Scroll Follow object should be completely configured through CSS.

PARAMETERS

speed
int - default: 500
The duration of the sliding animation (in milliseconds). The smaller the value, the faster the animation.
easing
string - default: 'linear'
If included, use any one of the easing options from the easing plugin. Uses 'linear' by default which provides no easing.
offset
int - default: 0
Number of pixels the Scroll Follow object should remain from top of viewport.
container
string - default: object's immediate parent
ID of the containing div.
killSwitch
string - default: 'killSwitch'
ID of the On/Off toggle element. Requires the jQuery Cookie plugin.
onText
string - default: 'Turn Slide Off'
killSwitch text to be displayed if sliding is enabled.
offText
string - default: 'Turn Slide On'
killSwitch text to be displayed if sliding is disabled.
relativeTo
string - default: 'top'
Scroll animation can be relative to either the 'top' or 'bottom' of the viewport.
delay
int - default: 0
Time between the end of the scroll and the beginning of the animation in milliseconds.

HISTORY