您好,欢迎来到伴沃教育。
搜索
您的当前位置:首页使用waypoints监听滚动事件scrollspy

使用waypoints监听滚动事件scrollspy

来源:伴沃教育

使用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')
            });
        });

Copyright © 2019- bangwoyixia.com 版权所有 湘ICP备2023022004号-2

违法及侵权请联系:TEL:199 1889 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务