Question

我正在尝试实现我在SO上找到的一些代码，当匹配的div在页面上时，它会添加类“active”。因此向下滚动，到达div并将活动类添加到正确的菜单项。目前，它正在工作，但有一些障碍，现在它在div的底部应用活动类，而不是当它击中顶部。所以我觉得我有点失落。

这是当前的JS：

<script>
    // Cache selectors
    var lastId,
        topMenu = $("#nav"),
        topMenuHeight = topMenu.outerHeight()+15,
        // 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"),
        offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight+1;
    $('html, body').stop().animate({ 
        scrollTop: offsetTop
    }, 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");
    }                   
    });
</script>

你可以在jsfiddle上查看原始js，但我的行为不像这样：http://jsfiddle.net/mekwall/up4nu/

我看到的问题：在小提琴上它起作用但小提琴上的div没有高度只是一个顶部值，如果你像任何div一样增加高度会导致问题。

Answer 1

找到了一个更好的解决方案，我上面的东西，我为它做了一个codepen。

https://codepen.io/LukeD1uk/pen/MVeGQW

$(window).scroll(function() {
    var windscroll = $(window).scrollTop();
    if (windscroll >= 100) {
        $('section').each(function(i) {
            if ($(this).position().top <= windscroll - 0) {
                $('nav li.active').removeClass('active');
                $('nav li').eq(i).addClass('active');
            }
        });

    } else {

        $('nav li.active').removeClass('active');
        $('nav li:first').addClass('active');
    }

    }).scroll();

在底部而非顶部应用滚动时添加活动类

1 个答案: