JavaScript目录菜单滚动反显组件的实现-阿里云开发者社区

开发者社区> 杰克.陈> 正文

JavaScript目录菜单滚动反显组件的实现

简介: 原文:JavaScript目录菜单滚动反显组件的实现 JavaScript目录菜单滚动反显组件,有以下两个特点 每个导航菜单项(nav)对应页面一个内容区域(content) 滚动页面到特定内容区域(content)时,对应的菜单会自动切换,一般会添加一个高亮样式 这个功能可以很方便的提醒用户目前所浏览的位置,有时目录菜单还会设计为滚动时一直固定在指定位置。
+关注继续查看
原文: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)
};

  

线上示例

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
在COM组件中调用JavaScript函数 .
在COM组件中调用JavaScript函数 要求是很简单的,即有COM组件A在IE中运行,使用JavaScript(JS)调用A的方法longCalc(),该方法是一个耗时的操作,要求通知IE当前的进度。
693 0
在javascript中使用com组件的方法
转载自:  http://dhailin.blog.163.com/blog/static/230738322011128102043880/     首先创建一个COM组件,插入一个双接口Itest,在此接口上实现以下三个方法: [cpp] view plaincopy ...
932 0
Winjs – 微软开源技术发布的 JavaScript 组件集
  Winjs 是由微软开源技术的开发者推出的一组 JavaScript 组件,包括 ListView、ListView、Tooltip、DatePicker、Ratings 等等,帮助 Web 开发人员使用最好的网站功能解决方案。
728 0
[WebKit] JavaScriptCore解析--基础篇(二)解释器基础与JSC核心组件
这一篇主要说明解释器的基本工作过程和JSC的核心组件的实现。 作为一个语言,就像人在的平时交流时一样,当接收到信息后,包含两个过程:先理解再行动。
1219 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
4390 0
JavaScript轻应用:UI组件的属性配置
之前的文档已经介绍过,轻应用UI主要包含三部分:页面结构(xml文件)、页面样式(css文件)和页面逻辑(js文件),这里主要介绍一下页面结构的组成。
59 0
java web 项目中封装的下拉列表小组件:实现下拉列表使用者前后端0行代码
像easy ui 之类的纯前端组件,也有下拉列表组件,但是使用的时候,每个下拉列表,要配一个URL ,以及设置URL反回来的值和 select 的text ,和value 的对应关系 ,这有2个问题:一使用者必须知道URL ,二,如果页面有10个下拉表表,要请求后台10次,肯定影响性能,而我想要的是.
1220 0
+关注
杰克.陈
一个安静的程序猿~
9798
文章
2
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载