数据滚动和数据锚点——活动类关闭

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