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

发布时间:2021-08-10 11:00:09 作者:chen
来源:亿速云 阅读:384

本篇内容介绍了“jQuery怎么实现浮动层跟随页面滚动效果”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

文章目录  

在本文中,我将介绍一个可以跟随页面滚动的层效果,当用户滚动鼠标滚轮或者拖动浏览器滚动条时,浮动层将跟随滚动。我通过实例讲解相关插件的应用以及使用时注意事项。

该效果大多应用在企业网站的在线客服服务、电子商务网站的购物车以及商业网站的广告条展示等场合。

在本例中,我用到了一个重要的插件:scroll-follow,该插件在当前主流浏览器IE6+, FF2+, Safari 3,and Opera 9均测试通过,具有可配置参数,使用简单的特点。

HTML

<p id="scroll" class="demo">    ...任意你想展示的内容 </p>

只需要一个p层,内容任意。值得注意的是,如果你想把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层的位置,相当灵活,具体效果可以查看DEMO演示。

“jQuery怎么实现浮动层跟随页面滚动效果”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!

推荐阅读:
  1. jquery实现数字滚动效果
  2. web开发之如何禁止弹窗中蒙层底部页面跟随滚动

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

jquery

上一篇:jQuery怎么实现返回顶部按钮效果

下一篇:怎么用PHP+Mysql+jQuery实现发布微博程序

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》