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

Question

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

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

SEE DEMO

由@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();