My favorites | Sign in
Project Logo
                
Search
for
Updated Oct 29, 2008 by whoop06
Usage  
Instructions on installing and using JQuery Scroll Follow

Usage

  1. Include JQuery
  2. <script type="text/javascript" src="jquery.js"></script>
  3. Include required plugins, including Scroll Follow:
  4. <script type="text/javascript" src="ui.core.js"></script>
    <script type="text/javascript" src="jquery.easing.js"></script>
  5. Call Scroll Follow on the desired DOM object: See Example
  6. <script type="text/javascript">
    	$( '#example' ).scrollFollow();
    </script>
  7. Or call Scroll Follow on the desired DOM object and give it some parameters: See Example
  8. <script type="text/javascript">
    	$( document ).ready( function () {
    		$( '#example' ).scrollFollow( {
    			speed: 1000,
    			offset: 60,
    			killSwitch: 'exampleLink',
    			onText: 'Disable Follow',
    			offText: 'Enable Follow'
    		} );
    	} );
    </script>
  9. The Scroll Follow object will remain inside its immediate container. See Example
  10. Or you can specify a parent (by ID) for the Scroll Follow object to consider its container: See Example
  11. <script type="text/javascript">
    	$( document ).ready( function () {
    		$( '#example' ).scrollFollow( {
    			container: 'outer'
    		} );
    	} );
    </script>
  12. 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.

Comment by nz.david.harris, Oct 16, 2008

the "See Example" links are incorrect :(

Comment by whoop06, Oct 29, 2008

Thank you. Fixed

Comment by shark.byte.usa, Jan 23, 2009

in Firefox the container doesn't seem to work if the position is relative and the container is not the immediate container. i.e. div(container) > div > scrollobject. doesn't seem to work. have to prove again but in pre-existing page it's just scrolling right on through the container. position had to changed to relative to fix IE bug, it worked flawlessly in FF with position absolute


Sign in to add a comment
Hosted by Google Code