JavaScript吸頂燈的實現

吸頂燈是各站點常用的一個功能，它有兩個特性

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在恢復到初始狀態時調用。

 

線上示例