本篇内容介绍了“jQuery怎么实现浮动层跟随页面滚动效果”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
创新互联是一家集网站建设,武安企业网站建设,武安品牌网站建设,网站定制,武安网站建设报价,网络营销,网络优化,
武安网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。
文章目录
在本文中，我将介绍一个可以跟随页面滚动的层效果，当用户滚动鼠标滚轮或者拖动浏览器滚动条时，浮动层将跟随滚动。我通过实例讲解相关插件的应用以及使用时注意事项。
该效果大多应用在企业网站的在线客服服务、电子商务网站的购物车以及商业网站的广告条展示等场合。
在本例中，我用到了一个重要的插件：scroll-follow，该插件在当前主流浏览器IE6+， FF2+， Safari 3，and Opera 9均测试通过，具有可配置参数，使用简单的特点。
HTML
...任意你想展示的内容
只需要一个p层，内容任意。值得注意的是，如果你想把DIV展示在页面左右两边，则应该把这个DIV放在紧跟
后。
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
调用插件非常简单，代码如下：
$(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层的位置，相当灵活，具体效果可以查看DEMO演示。
“jQuery怎么实现浮动层跟随页面滚动效果”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站，小编将为大家输出更多高质量的实用文章！
文章题目：jQuery怎么实现浮动层跟随页面滚动效果-创新互联
网页网址：
http://cdkjz.cn/article/cepjih.html
