JavaScript目錄菜單滾動反顯組件的實現

JavaScript目錄菜單滾動反顯組件，有以下兩個特點

1. 每個導航菜單項(nav)對應頁面一個內容區域(content)
2. 滾動頁面到特定內容區域(content)時，對應的菜單會自動切換，一般會添加一個高亮樣式

這個功能可以很方便的提醒用戶目前所瀏覽的位置，有時目錄菜單還會設計為滾動時一直固定在指定位置。

 

以下為此類功能的應用示例：

1. 京東團購首頁左側導航菜單

  

2. 京東圖書詳細頁右側圖書目錄導航

 

3. 京東團購品牌惠樓層分類菜單

 

實現思路：

和吸頂燈類似，也是滾動在特定內容的時候去對特定的元素做樣式處理。不同的是這里的每一個菜單項一一對應相應的內容區域。

1. 給菜單和內容區域加特定的屬性(data-xx)，關聯起對應關系 
2. 記錄所有內容(content)的位置信息(注意，需要在頁面load后)
3. 給window添加scroll事件，當滾動到指定內容時高亮顯示對應的菜單項(因為是一一對應的，通過索引就可以找到對應菜單項)

 

如果使用了jQuery，通過插件方式實現不過50行代碼

/*
 * 導航/菜單高亮組件
 * option
 *   nav 導航/菜單選擇器
 *   content 內容模塊選擇器
 *   diffTop 距離頂部的誤差值
 *   diffBottom 距離底部的誤差值
 *   lightCls 高亮的class
 * 
 */
$.fn.navLight = function(option, callback) {
    option = option || {}
    var nav = option.nav || '[data-widget=nav]'
    var content = option.content || '[data-widget=content]'
    var diffTop = option.diffTop || 200
    var diffBottom = option.diffBottom || 500
    var lightCls = option.lightCls || 'curr'

    var $self = $(this)
    var $nav = $self.find(nav)
    var $content = $self.find(content)

    // 記錄每個分類的位置
    var contentPosi = $content.map(function(idx, elem) {
        var $cont = $(elem)
        var top = $cont.offset().top
        var height = $cont.height()
        return {
            top: top-diffTop,
            bottom: top+diffBottom,
            jq: $cont
        }
    })

    var $win = $(window)
    var $doc = $(document)

    var handler = $.throttle(function(e) {
        var dTop = $doc.scrollTop()
        highLight(dTop)
    }, 100)
    
    function highLight(docTop) {
        contentPosi.each(function(idx, posi) {
            if (posi.top < docTop && posi.bottom > docTop) {
                $nav.removeClass(lightCls)
                $nav.eq(idx).addClass(lightCls)
                if (callback) {
                    callback($nav, $content)
                }
            }
        })
    }

    $win.scroll(handler)
};

　　

線上示例