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

  1. 向下滚动到div位置时,该div一直固定在页面的顶部
  2. 向上滚动到div原有位置时,div又恢复到文档中的原位置

div可能是一个“分类菜单”,也可能是一个“文章导航”。如

也有可能是一个购物 “账单信息”

实现思路如下

  1. div初始居普通文档流中
  2. 给window添加scroll事件(可事件节流),获取div的offset的top值,滚动时scrollTop值和top比较,当到达top时给div添加一个fixed的class使其固定
  3. 向上滚动时当到达div初始top时则删除fixed的class,此时div又回到普通文档流中
  4. 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.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吸顶灯的实现的更多相关文章

  1. JavaScript目录菜单滚动反显组件的实现

    JavaScript目录菜单滚动反显组件,有以下两个特点 每个导航菜单项(nav)对应页面一个内容区域(content) 滚动页面到特定内容区域(content)时,对应的菜单会自动切换,一般会添加一 ...

  2. 二、JavaScript语言--JS实践--商城分类导航效果

    商城类导航菜单制作(以京东为例--竖向列表横向伸缩) 可以用两种方式来实现:用CSS实现和用JS实现 方法一:用CSS实现(要点:使用hover) <!DOCTYPE html PUBLIC & ...

  3. javascript 可控速度的上下拉菜单

    样式部分 <style type="text/css"> *{ margin:0; padding:0; border:none; background:none;} ...

  4. JavaScript之父Brendan Eich,Clojure 创建者Rich Hickey,Python创建者Van Rossum等编程大牛对程序员的职业建议

    软件开发是现时很火的职业.据美国劳动局发布的一项统计数据显示,从2014年至2024年,美国就业市场对开发人员的需求量将增长17%,而这个增长率比起所有职业的平均需求量高出了7%.很多人年轻人会选择编 ...

  5. javascript中的Array对象 —— 数组的合并、转换、迭代、排序、堆栈

    Array 是javascript中经常用到的数据类型.javascript 的数组其他语言中数组的最大的区别是其每个数组项都可以保存任何类型的数据.本文主要讨论javascript中数组的声明.转换 ...

  6. Javascript 的执行环境(execution context)和作用域(scope)及垃圾回收

    执行环境有全局执行环境和函数执行环境之分,每次进入一个新执行环境,都会创建一个搜索变量和函数的作用域链.函数的局部环境不仅有权访问函数作用于中的变量,而且可以访问其外部环境,直到全局环境.全局执行环境 ...

  7. 探究javascript对象和数组的异同,及函数变量缓存技巧

    javascript中最经典也最受非议的一句话就是:javascript中一切皆是对象.这篇重点要提到的,就是任何jser都不陌生的Object和Array. 有段时间曾经很诧异,到底两种数据类型用来 ...

  8. 读书笔记:JavaScript DOM 编程艺术(第二版)

    读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...

  9. 《Web 前端面试指南》1、JavaScript 闭包深入浅出

    闭包是什么? 闭包是内部函数可以访问外部函数的变量.它可以访问三个作用域:首先可以访问自己的作用域(也就是定义在大括号内的变量),它也能访问外部函数的变量,和它能访问全局变量. 内部函数不仅可以访问外 ...

随机推荐

  1. mysql中如何把字符串转换成日期类型

    select date_format('2013-03-09','%Y-%m-%d'); select date_format('2013-03-09','%y-%m-%d'); select STR ...

  2. Fisrt Node-Webkit App

    1.什么是Node-Webkit 基于node.js和chromium的应用程序实时运行环境,可运行通过HTML(5).CSS(3).Javascript来编写的本地应用程序.node.js和webk ...

  3. 使用HttpRequester模拟发送及接收Json请求

    1.开发人员在火狐浏览器里经常使用的工具有Firebug,httprequester,restclient......火狐浏览器有一些强大的插件供开发人员使用!需要的可以在附加组件中扩展. 2.htt ...

  4. MVC学习笔记索引帖

    [MVC学习笔记]1.项目结构搭建及单个类在各个层次中的实现 [MVC学习笔记]2.使用T4模板生成其他类的具体实现 [MVC学习笔记]3.使用Spring.Net应用IOC(依赖倒置) [MVC学习 ...

  5. Unity3D入门基本概念整理

    1. (1)在场景中添加资源 只需单击工程视图 (Project View) 中的网格(Mesh)并拖动至层级视图 (Hierarchy) 或场景视图 (Scene View),便可将其添加至场景 ( ...

  6. Equeue初识

    详细解说: http://www.cnblogs.com/netfocus/p/3595410.html 简单代码用法: Producer 端代码用法实例 和 Customer 端代码用法示例: ht ...

  7. 关闭Eclipse中自动弹出console的功能

    当我们使用Eclipse编写代码的时候,一般都会使界面最大化,如果这时tomcat服务器处在运行的状态,那么当后台有打印内容,比如日志输出,代码程序报错输出时,console就会自动弹出,很不方便. ...

  8. oracle sql 语句优化

    (1)选择最有效率的表名顺序(只在基于规则的优化器中有效):Oracle的解析器按照从右到左的顺序处理FROM子句中的表名,FROM子句中写在最后的表(基础表 driving table)将被最先处理 ...

  9. Couchbase介绍,更好的Cache系统

    在移动互联网时代,我们面对的是更多的客户端,更低的请求延迟,这当然需要对数据做大量的 Cache 以提高读写速度. 术语 节点:指集群里的一台服务器. 现有 Cache 系统的特点 目前业界使用得最多 ...

  10. PHP学习笔记:MySQL数据库的操纵

    Update语句 Update 表名 set 字段1=值1, 字段2=值2  where  条件 练习: 把用户名带  ‘小’的人的密码设置为123456@ 语句:UPDATE crm_user SE ...