http://www.cnblogs.com/snandy/p/3994713.html
吸顶灯是各站点常用的一个功能,它有两个特性
- 向下滚动到div位置时,该div一直固定在页面的顶部
- 向上滚动到div原有位置时,div又恢复到文档中的原位置
div可能是一个“分类菜单”,也可能是一个“文章导航”。如
也有可能是一个购物 “账单信息”
实现思路如下
- div初始居普通文档流中
- 给window添加scroll事件(可事件节流),获取div的offset的top值,滚动时scrollTop值和top比较,当到达top时给div添加一个fixed的class使其固定
- 向上滚动时当到达div初始top时则删除fixed的class,此时div又回到普通文档流中
- fixed样式非IE6浏览器使用position:fixed,IE6使用position:absolute和IE expression
1
2
3
4
5
6
7
|
. fixed {
position : fixed ;
top : 0 ;
z-index : 100 ;
- position : absolute ;
- top : expression(eval(document.documentElement.scrollTop))
} |
jQuery插件的实现代码如下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
/* * 吸顶灯
* option {
* fixCls: className,默认 “fixed”
* fixedFunc: 吸顶时回调函数
* resetFunc: 不吸顶时回调函数
* }
*/
$.fn.topSuction = function (option) {
option = option || {}
var fixCls = option.fixCls || 'fixed'
var fixedFunc = option.fixedFunc
var resetFunc = option.resetFunc
var $self = this
var $win = $(window)
if (!$self.length) return
var offset = $self.offset()
var fTop = offset.top
var fLeft = offset.left
// 暂存
$self.data( 'def' , offset)
$win.resize( function () {
$self.data( 'def' , $self.offset())
})
$win.scroll( function () {
var dTop = $(document).scrollTop()
if (fTop < dTop) {
$self.addClass(fixCls)
if (fixedFunc) {
fixedFunc.call($self, fTop)
}
} else {
$self.removeClass(fixCls)
if (resetFunc) {
resetFunc.call($self, fTop)
}
}
})
}; |
这里分别提供了两个回调,fixedFunc在fixed后调用,resetFunc在恢复到初始状态时调用。
相关推荐
使用JavaScript实现的跑马灯效果。跑马灯图片使用自动添加img标签实现,可以添加10张图片,只需修改图片数组的内容,在数组中添加相应图片名称即可。
JavaScript跑马灯图
JavaScript实现随机抽奖 JavaScript实现随机抽奖 JavaScript实现随机抽奖 JavaScript实现随机抽奖 JavaScript实现随机抽奖 JavaScript实现随机抽奖 JavaScript实现随机抽奖 JavaScript实现随机抽奖 ...
javascript网页中实现选项卡效果特效
JavaScript 瀑布流 吸顶 兼容IE FF Chrome
web大作业 基于HTML+JavaScript+Layui实现的电商网站源码(19页) web大作业 基于HTML+JavaScript+Layui实现的电商网站源码(19页) web大作业 基于HTML+JavaScript+Layui实现的电商网站源码(19页) web大作业 基于...
基于JavaScript的微信理财产品销售系统的设计与实现 基于JavaScript的微信理财产品销售系统的设计与实现 基于JavaScript的微信理财产品销售系统的设计与实现 基于JavaScript的微信理财产品销售系统的设计与实现 ...
JavaScript实现页面动态验证码
JavaScript实现轮播特效(代码)JavaScript实现轮播特效(代码)JavaScript实现轮播特效(代码)JavaScript实现轮播特效(代码)JavaScript实现轮播特效(代码)JavaScript实现轮播特效(代码)JavaScript实现轮播...
javaScript拖曳流程实现,可以嵌套入web里实现工作流。修改了原有的一些bug.
银行家算法-javascript实现.zip 银行家算法-javascript实现.zip银行家算法-javascript实现.zip银行家算法-javascript实现.zip银行家算法-javascript实现.zip银行家算法-javascript实现.zip银行家算法-javascript实现...
基于JavaScript实现的程序员表白爱心代码(2套) 基于JavaScript实现的程序员表白爱心代码(2套) 基于JavaScript实现的程序员表白爱心代码(2套) 基于JavaScript实现的程序员表白爱心代码(2套) 基于JavaScript实现的...
基于原生JavaScript实现的扫雷小游戏 基于原生JavaScript实现的扫雷小游戏 基于原生JavaScript实现的扫雷小游戏 基于原生JavaScript实现的扫雷小游戏 基于原生JavaScript实现的扫雷小游戏 基于原生JavaScript实现的...
web期末大作业 基于HTML+CSS+JavaScript实现的精美电商购物网站首页源码 web期末大作业 基于HTML+CSS+JavaScript实现的精美电商购物网站首页源码 web期末大作业 基于HTML+CSS+JavaScript实现的精美电商购物网站首页...
javascript 实现的进度条效果 javascript 实现的进度条效果
基于JavaScript和BootStrap实现B站分集视频的区间内总时长计算源码+项目说明.zip基于JavaScript和BootStrap实现B站分集视频的区间内总时长计算源码+项目说明.zip基于JavaScript和BootStrap实现B站分集视频的区间内总...
FoldView在JavaScript中的实现⛱,这个项目的灵感来自于在Dribbble上见过的折叠单元动画。
javascript实现开门效果
组件式AngularJS应用示例(Phonecat)用现代Javascript和Webpack实现
使用纯JavaScript代码,实现Ajax,在Javascript中调用java代码。 其中返回值可以使单个值,对象,集合