JavaScript吸顶灯的实现

吸顶灯是各站点常用的一个功能，它有两个特性

向下滚动到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

.fixed {position: fixed;top: 0;z-index: 100;-position: absolute;-top: expression(eval(document.documentElement.scrollTop))
}

jQuery插件的实现代码如下

/** 吸顶灯* option {*    fixCls: className，默认 “fixed”*    fixedFunc: 吸顶时回调函数*    resetFunc: 不吸顶时回调函数* }*/
$.fn.topSuction = function(option) {option = option || {}var fixCls = option.fixCls || 'fixed'var fixedFunc = option.fixedFuncvar resetFunc = option.resetFuncvar $self = thisvar $win  = $(window)if (!$self.length) returnvar offset = $self.offset()var fTop   = offset.topvar 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吸顶灯的实现相关推荐

前端开发——吸顶灯效果
前端开发--吸顶灯效果功能实现:当鼠标滚动时,导航栏吸附在顶端方法:通过鼠标滚动事件+固定布局(fixed) html: <div class="example"> ...
HTML 吸顶灯效果实现
1.首先写好导航栏,这里以oppo官网的导航栏为例,html写导航栏时这里给它一个"nav"的id 2.body内添加脚本 <script type="text/j ...
【AJAX】JavaScript的面向对象
Ajax中后端数据返回后需要前端通过JavaScript来实现动态数据更新的问题.所以,在Ajax中加深了一遍JavaScript面向对象的印象. 基础部分: JavaScript中创建对象并简单对象 ...
【JavaScript总结】JavaScript语法基础：JS高级语法
作用域链: 1.JS中只有函数能够限定作用域的范围: 2.变量处理在制定的函数范围内,还有一个特殊的作用域,就是没有用var 声明的全局作用域 3.js中的作用域链是为了清晰的表示出所有变量的作用范围 ...
【JavaScript总结】JavaScript语法基础：DOM
->DOM的理解:文档对应dom树 ->有了DOM能做什么:DOM的操作 html文档做为DOM树模型,DOM树的节点就是对象.对象会触发事件来执行一些事件代码. C#中的事件是一个委托变 ...
【JavaScript总结】JavaScript语法基础：JS编码
运算符数学:+. -. *. / 逻辑:>. < .>= .<=. == . !=.&&.|| . === .!==(完全等于) 对象相关 new delet ...
【JavaScript总结】JavaScript语法基础：数据类型
------>数据类型有哪些? ->基本类型:数字类型,布尔类型,字符串类型 ->引用类型:对象类型,函数类型 ->空类型:null 和 undefined ->运算符: ...
【JavaScript总结】JavaScript发展与学习内容
发展: 最初浏览器是为大学里浏览文档用,从地址栏输入文档地址,找到文档显示. 后来各种需求(购物网站,个人博客)出现,已有功能不能满足需求. 可人们依旧在努力满足这种需求,但实现后的效果很不尽人意. ...
Python：模拟登录、点击和执行 JavaScript 语句案例
案例一:网站模拟登录 # douban.pyfrom selenium import webdriver from selenium.webdriver.common.keys import Keys ...

JavaScript吸顶灯的实现

JavaScript吸顶灯的实现相关推荐

最新文章

热门文章