首页 > 代码库 > JavaScript吸顶灯的实现

JavaScript吸顶灯的实现

2024-07-26 00:13:43   211人阅读

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

  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吸顶灯的实现


联系
我们