JavaScript目录菜单滚动反显组件,有以下简单只特点

  1. 每个导航菜单项(nav)对应页面一个情区域(content)
  2. 滚动页面及特定内容区域(content)时,对应之菜系会自动切换,一般会补加一个高亮样式

其一效能可老方便的提示用户眼前所浏览的岗位,有时目录菜单还会规划呢滚动时平昔稳在指定地方

 

以下也此类效能的施用示范:

  1. 京东团购首页左侧导航菜单

jQuery 1

  

  1. 京东图书详细页右边图书目录导航

jQuery 2

 

  1. 京东团购品牌惠楼层分类菜单

jQuery 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)
};

  

丝及演示

相关文章

网站地图xml地图