jQuery ScrollSpy Active Nav 跟随两个 div答案

【问题标题】：jQuery ScrollSpy Active Nav follows two divsjQuery ScrollSpy Active Nav 跟随两个 div
【发布时间】：2015-02-09 15:13:26
【问题描述】：

我在正确滚动时无法使用 scrollspy 插件来跟踪我的活动状态。我正在使用 scrollspy.js 库。我愿意优化插件，例如在某些偏移量中发生状态变化。我在插件中找不到任何选项来执行 OffsetTop，因为我相信这会解决问题。下面是我的 HTML 结构和初始化插件的 javascript。

    <div class="faq_tabs hidden_faq_tabs">
       <div id="my-nav">
          <ul class="stickyMenu">
             <li>
                <a href="#general" data-spyer="general">General</a>
             </li>
             <li>
                <a href="#student" data-spyer="student">Student</a>
             </li>
             <li>
                <a href="#business" data-spyer="business">Business</a>
             </li>
          </ul>
       </div>
    </div>
    <div>
        <h1 id="general" class="spyon">GENERAL</h1>
    </div>

    <div>
        <h1 id="student" class="spyon">STUDENT</h1>
    </div>
    <div>
        <h1 id="business" class="spyon">BUSINESS</h1>
    </div>

我已经定制了如下所示的脚本来获取数据属性以添加活动类。

    $('.spyon').scrollSpy();

    $('.spyon').on('scrollSpy:enter', function(){
        $('[data-spyer="' + $(this).attr('id') + '"]').addClass('spyedon');
    });

    $('.spyon').on('scrollSpy:exit', function(){
       $('[data-spyer="' + $(this).attr('id') +   '"]').removeClass('spyedon');
    });

这是我使用插件的演示：

http://frakton.com/scholarbiz-v1.2/?id=22

在提供的链接中，您可以看到错误。我愿意避免前两个项目的活动状态。

【问题讨论】：

标签： jquery html scrollspy

【解决方案1】：

基本上我所要做的就是优化脚本并避免使用 jquery scrollspy。下面是一个javascript代码，将来可能会对某人有所帮助。

   // Cache selectors
    var lastId,
        topMenu = $("#my-nav"),
        topMenuHeight = topMenu.outerHeight(),
        // All list items
        menuItems = topMenu.find("a"),
        // Anchors corresponding to menu items
        scrollItems = menuItems.map(function() {
            var item = $($(this).attr("href"));
            if (item.length) {
                return item;
            }
        });

    // Bind click handler to menu items
    // so we can get a fancy scroll animation
    menuItems.click(function(e) {
        var href = $(this).attr("href"),
            o = href === "#" ? 0 : $(href).offset().top - topMenuHeight;
        $('html, body').stop().animate({
            scrollTop: o
        }, 300);
        e.preventDefault();
    });

    // Bind to scroll
    $(window).scroll(function() {
        // Get container scroll position
        var fromTop = $(this).scrollTop() + topMenuHeight;

        // Get id of current scroll item
        var cur = scrollItems.map(function() {
            if ($(this).offset().top < fromTop)
                return this;
        });
        // Get the id of the current element
        cur = cur[cur.length - 1];
        var id = cur && cur.length ? cur[0].id : "";

        if (lastId !== id) {
            lastId = id;
            // Set/remove active class
            menuItems
                .parent().removeClass("active")
                .end().filter("[href=#" + id + "]").parent().addClass("active");
        }
    });

所有你需要做的就是改变与菜单或粘性导航相对应的类的值，它可能在 topMenu 变量中，并为活动类设置样式。

【讨论】：