吸顶灯是各国站点常用之一个意义,它发出点儿单特征

  1. 往下滚动到div地点时,该div一向稳定于页面的顶部
  2. 腾飞滚动到div原有地方时,div又回升到文档中的原地点

 

div可能是一个“分类菜单”,也恐怕是一个“小说导航”。如

图片 1

否发生或是一个购物 “账单信息”

图片 2

 

心想事成思路如下

  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在还原至起来状态时调用。

 

丝上演示

相关文章

网站地图xml地图