jquery模仿淘宝首页侧边指定区域固定悬浮效果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.2.6)
• jQuery UI Core (tested with 1.5.2)

OPTIONAL

• jQuery Easing Plugin
• jQuery Cookie Plugin

INSTALLATION

1. Include jQuery:
   1. <script type=”text/javascript” src=”jquery.js”></script>
2. Include required plugins, including Scroll Follow:
   2. <script type=”text/javascript” src=”ui.core.js”></script>
   3. <script type=”text/javascript” src=”jquery.scrollFollow.js”></script>
3. Call Scroll Follow on the desired DOM object:
   View Example
   4. <script type=”text/javascript”>
   5.   $( ‘#example’ ).scrollFollow();
   6. </script>
4. Or call Scroll Follow on the desired DOM object and give it some parameters:
   View Example
   7. <script type=”text/javascript”>
   8.  $( document ).ready( function () {
   9.    $( ‘#example’ ).scrollFollow( {
   10.     speed: 1000,
   11.     offset: 60,
   12.     killSwitch: ‘exampleLink’,
   13.     onText: ‘Disable Follow’,
   14.     offText: ‘Enable Follow’
   15.    } );
   16.  } );
   17. </script>
5. The Scroll Follow object will remain inside its immediate container.
   View Example
6. Or you can specify a parent (by ID) for the Scroll Follow object to consider its container:
   View Example
   7. <script type=”text/javascript”>
   8.  $( document ).ready( function () {
   9.   $( ‘#example’ ).scrollFollow( {
   10.    container: ‘outer’
   11.   } );
   12.  } );
   13. </script>
7. 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.
8. http://kitchen.net-perspective.com/open-source/scroll-follow/