jQuery实现浮动层跟随页面滚动效果

查看演示DEMO 下载源码
XHTML
<div id="scroll" class="demo"> 
    ...任意你想展示的内容 
</div> 

只需要一个div层，内容任意。值得注意的是，如果你想把DIV展示在页面左右两边，则应该把这个DIV放在紧跟<body>后。

CSS

.demo{width:180px; height:250px; margin:10px; border:2px solid #ccc; background:#eee; 
 padding:10px; position:relative; margin-top:-290px;} 

设置DIV的宽度和高度，并设置绝对位置position:relative以及距离顶部的值margin-top:-290px，这个290是怎么算出来的呢？一看就明白：290=250+10x2+10x2即DIV高度+两个margin值+两个padding值。

jQuery

首先引入jquery库和scroll-follow.js

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

调用插件非常简单，代码如下：

$(function(){ 
    $("#scroll").scrollFollow(); 
}); 

你可以通过设置以下参数获得更多的效果：

 

参数描述默认值
speed滚动的间隔毫秒数，数值越小，滚动越快。500
offset距离滚动顶部的点数（pixels）。0
relativeTo设置滚动的DIV靠上还是靠下，可以设置为"top"或"bottom"。top
killSwitch开启和取消跟随滚动开关的元素ID，需要jQuery Cookie plugin支持。"killSwitch"
onText如果启用了跟随滚动，开关显示的文字。"Turn Slide Off"
offText如果取消了跟随滚动，开关显示的文字。"Turn Slide On"

官方网站还提供了delay和container两个参数，用来控制滚动延时和滚动范围，我觉得没有多大实用意义，就不作描述了。

需要提醒的是，如果我想让浮动的DIV层展示在页面的右侧，该怎么办？其实该插件不具备此功能，我们需要做的就是通过CSS来定位浮动DIV的位置。

.demo{width:180px; height:250px; margin:10px; border:2px solid #ccc; background:#eee; 
 padding:10px; position:absolute; margin-top:156px; right:10px;} 

通过相对定位来确定浮动DIV层的位置，相当灵活，  演示：

jquery插件控制层浮动 http://www.helloweba.com/demo/scroll-follow/