Question

我正在开发两个网站Fredrix Design和Bosted System，其中我使用完全相同的“单页”系统文件和我在Stack Overflow上从another question获得的代码。

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

SEE DEMO

由@roasted在上述其他问题中提供/制作。

Answer 1

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

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

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

1 个答案: