jQuery跟随浏览器滚动条浮动层效果

一个”跟随浏览器滚动条浮动层” 的功能类似网页二则的浮动广告,使用 jQuery Scroll Follow实现

必须调用的js有：

jQuery Easing Plugin
jQuery Cookie Plugin
jQuery Scroll Follow
操作说明：

1. 包含以上三个必须得js脚本文件到你的项目：

以下是代码片段：
<script type="text/javascript" src="jquery.js"></script><script type="text/javascript" src="ui.core.js"></script><script type="text/javascript" src="jquery.scrollFollow.js"></script>
 
 

操作说明：

1. 包含以上三个必须得js脚本文件到你的项目：

以下是代码片段：
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="ui.core.js"></script>
<script type="text/javascript" src="jquery.scrollFollow.js"></script>
 
 

2. 绑定Scroll Following方法到希望实现该效果的DOM对象：

以下是代码片段：
<script type="text/javascript">
    $( ’#example’ ).scrollFollow();
 </script>
 
 

查看实例

3. 还可以为绑定DOM对象的Scroll Following设置参数：

以下是代码片段：
<script type="text/javascript">
  $( document ).ready( function () {
    $( ’#example’ ).scrollFollow( {
     speed: 1000,
     offset: 60,
     killSwitch: ’exampleLink’,
     onText: ’Disable Follow’,
     offText: ’Enable Follow’
    } );
  } );
</script>
 
 

查看实例

4. 或者为绑定的DOM对象指定一个上级（父）元素（通过调用父元素ID），为该绑定对象设置一个外部容器，使得效果只能在该限定容器范围内有效：

以下是代码片段：
<script type="text/javascript">
  $( document ).ready( function () {
   $( ’#example’ ).scrollFollow( {
    container: ’outer’
   } );
  } );
</script>
 
 

查看实例

更多参数设置及效果实现，可参看插件官方文档：jQuery Scroll Follow