jquery - 数据滚动和数据锚 - 活动类已关闭

Question

我正在开发两个站点，Fredrix Design和Bosted System，在这里我使用与Stack Overflow 上的另一个问题完全相同的“一页”系统文件和代码。

在 Fredrix Design 上，它运行良好——导航菜单将用户滑动到<section data-anchor="example">他/她通过<a data-scroll="example">. 但是，它在 Bosted System 网站上的工作方式不同。滑动机制正常工作，但active类偏离了 20 像素左右。当我到达一个不同的地方时它并没有完全改变<section>——当我进入它时它会改变。

看演示

在上面提到的另一个问题中由@roasted提供/制作。

Answer 1

在 Bosted 网站上，像这样设置窗口滚动处理程序似乎可以解决您的问题。您应该以这种方式进行调查以找出发生了什么，但我认为这是由于某处的一些填充/边距属性：

$(window).scroll(function() {
    var windscroll = $(window).scrollTop();
    if (windscroll >= 100) {
        $('section').each(function(i) {
            if ($(this).position().top <= windscroll + 84) { // << here '+ 84' instead of '- 20'
                $('nav a.active').removeClass('active');
                $('nav a').eq(i).addClass('active');
            }
        });

    } else {
        $('nav a.active').removeClass('active');
        $('nav a:first').addClass('active');
    }

}).scroll();