使用waypoints监听滚动事件scrollspy

本来使用bootstrap自带的 affix 好像很方便的样子,但是我的导航条已经自定义好了,同时发现affix列表长度如果超过当前页面的话会被截断,所以就放弃affix了ORZ……

先祭出神器 waypoints

使用waypoint特别需要注意的是,如果在一个div中使用waypoint是需要指定context的……(简直不敢说自己纠结了大半天 waypoints not working)

import jquery.waypoints.min.js,以下代码实现了滚动内容时导航栏自动切换到对应的 a 标签:

$('.contentMark').each(function() {
          $(this).waypoint(function(direction) {
              $('.aList a').removeClass("active");
              var tmpHref = '#' + this.element.id;
              $('#aList a').each(function() {
                    if ($(this).attr("href") == tmpHref) {
                        if (direction == 'down') {//如果向下滚动经过一个mark,则置当前mark对应的导航a置为激活
                            $(this).addClass('active');
                        } else if (direction == 'up') {//如果向上滚动经过一个mark,则置当前mark的上一个mark对应的导航a置为激活
                            $(this).prev().addClass('active');
                        }
                        return false;//break
                    }
                });
            }, {
              context: document.getElementById('content')
            });
        });
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第5章 菜单、按钮及导航 一、下拉菜单 小伙伴们注意,在Bootstrap框架中的下拉菜单组件是一个独立的组件,根...
    凛0_0阅读 5,087评论 0 66
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,827评论 1 92
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,080评论 19 139
  • Bootstrap是什么? 一套易用、优雅、灵活、可扩展的前端工具集--BootStrap。GitHub上介绍 的...
    凛0_0阅读 10,955评论 3 184
  • 因为有机会参与一个项目的早期设计,因此搭建的时候不可避免的遇到了如何满足响应式的问题。翻阅了《响应式Web设计:H...
    tangyefei阅读 6,479评论 2 90