jQuery实现浮动层跟随页面滚动效果
在本文中，我将介绍一个可以跟随页面滚动的层效果，当用户滚动鼠标滚轮或者拖动浏览器滚动条时，浮动层将跟随滚动。我通过实例讲解相关插件的应用以及使用时注意事项。
该效果大多应用在企业网站的在线客服服务、电子商务网站的购物车以及商业网站的广告条展示等场合。
在本例中，我用到了一个重要的插件：scroll-follow，该插件在当前主流浏览器IE6+， FF2+， Safari 3，and Opera 9均测试通过，具有可配置参数，使用简单的特点。
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层的位置，相当灵活，具体效果可以查看DEMO演示。
jQuery实现浮动层跟随页面滚动效果的更多相关文章
- js实现浮动框跟随页面滚动，最后停留在原来位置
左边悬浮的二维码会跟随页面向上或者向下滚动,最后停留在原来的位置. <div style="background:red; width:1000px; height:7000px; m ...
- 20 个用于处理页面滚动效果的 jQuery 插件
对设计和开发一个网站来说,web开发者不能低估了网站滚动效果的重要性.如今,设计者们都视为一大挑战了,在网站中设计出吸引眼球的高效视觉滚动效果.幸运的是有各种各样的jquery 滚动插件可供他们使用, ...
- JQuery浮动层Loading页面加载特效
之前做项目,经常需要一些浮动层加载Loading. 现在好多前端框架都能实现了,最常用的就是 artDialog 下面记录下当时的代码. <!DOCTYPE html PUBLIC " ...
- 简单的 jQuery 浮动层随窗口滚动滑动插件实例
写了一个非常简单的 jQuery 插件实例 浮动层随窗口滚动滑动 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/ ...
- 用jquery实现平滑的页面滚动效果
通过几句jquery代码实现页面平滑滚动到某一锚点的效果.实现代码来源于https://css-tricks.com/snippets/jquery/smooth-scrolling 实现的jquer ...
- Page Scroll Effects - 简单的页面滚动效果
Codyhouse 收集了一组页面滚动效果,就是目前大家很常见的用户在浏览网页的时候.一些效果虽然极端,但如果你的目标是创建一个身临其境的用户体验,他们是非常有用的.所有的动画都使用 Velocity ...
- HTML+CSS页面滚动效果处理
HTML+CSS代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> ...
- jquery实现导航栏跟随窗口滚动
最近在制作一个模版的时候用到的一个jquery插件,当网站导航滚动到当前可见页面顶部时,固定在顶部并随窗口滚动,有很多的网站前台模版有有类似的效果. smohan.fixednav.js /* * 随 ...
- IOS设备上网页中的页面滚动效果模拟
可能咋一看不知道我说的是个啥,因为iOS本来就用这功能的啊,还模拟它干啥?先听我说下项目背景哈 我现在开发的是一个webapp,主要是用在ipad上,这个app的大小是固定大小的,为了防止触摸它出现弹 ...
随机推荐
- 有趣的Java之调皮的浮点数
**当你在写一个电商网站的时候,你可能会给你的商品标价1.99,10.9这样的价格来吸引顾客.我应该用浮点数float/double来储存它们,当我的顾客购买商品的时候,从他们的账户里扣费,使用整型是 ...
- dubbo-monitor安装监控中心，管理控制台安装
一.安装监控中心 1.创建安装目录 2.解压 上传文件解压文件 解压 3.修改配置文件 4.启动 如果一直出现点.只需要加大内存即可,内存至少大于1024,然后reboot重启 5.测试 二.安装管理 ...
- vue - webpack.base.conf.js
描述:webapck基本配置文件. 为了给开发文件和打包文件(webpack.dev.conf.js|| webpack.prod.conf.js) 提供方便. 'use strict' // 路径 ...
- Windows最强ssh客户端推荐 —— Bitvise SSH Client
原名Tunnelier,解除它是因为为了sshFQ,没想到它既有SSH Terminal,又集成SFTP,还能FQ,功能一应区全. 还支持pem证书,回想最初使用putty,还要把pem证书进行转换才 ...
- init: cannot execve(‘XXX’）：Permission denied问题
近期在给android 4.3系统进行root时候,一直出现例如以下的红色权限问题 : 7.695741] Freeing init memory: 236K [ 8.555286] ini ...
- 详解Android中那些酷炫返回方式的实现
Android手机都会有返回键,不管是实体键,还是虚拟键.Android用户主要也都是通过这个返回键操控页面返回方式的,不比IOS逼格甚高的只保留一个操作键.这种方式是最普遍的返回方式,还有一种也是比 ...
- easyui treegrid增、删、改及批量保存
treegrid添加新行和删除行的方法: 添加和删除直接调用这两个方法即可,修改的方法有点特殊,treegrid没有提供update方法,设置行为编辑状态,$('#obj_tgd_objectlist ...
- C#调用 oracle存储过程
C#调用oracle 存储过程与调用Sql server存储过程类似,比较简单:直接给出示例: /// <summary> /// 判断物料类型是不是总部管控 /// </summa ...
- EF CodeFirst 命令步骤
添加EntityFramework 命令:Install-Package EntityFramework 1.启用迁移 Enable-Migrations 2.为挂起的Model变化添加迁移脚本 Ad ...
- canvas学习笔记（下篇） -- canvas入门教程--保存状态/变形/旋转/缩放/矩阵变换/综合案例（星空/时钟/小球）
[下篇] -- 建议学习时间4小时 课程共(上中下)三篇 此笔记是我初次接触canvas的时候的学习笔记,这次特意整理为博客供大家入门学习,几乎涵盖了canvas所有的基础知识,并且有众多练习案例, ...