Firefox 中的 javaScript 错误 - 无法使用活动类更新菜单项

Question

我正在构建一个具有不同部分的“向下滚动”网站，但基本上您需要/可以做的就是滚动或按下将自动滚动到所选部分的菜单。

我有一段 js 使用 .active 类更新菜单链接，这样当您向下滚动时，您所看到的部分的相应菜单项将变为活动状态。 虽然它在 Chrome 上运行良好，但我似乎无法让它在 Firefox/Explorer 上运行。我只是找不到问题......

我制作了一个小的 jsfiddle (http://jsfiddle.net/Lxzwfk0u/) 来描述我正在构建的网站，并正确更新活动类。 （至少它在 chrome atm 上正确显示）

谁能帮我找出问题所在？我已经把它缩小到小提琴中的一点点js。我想...（也发在这里，也许你可以立即发现错误）

// add and remove 'active' class by scroll position
$(document).on("scroll", onScroll);
    function onScroll(event){
        var scrollPos = $('body').scrollTop();
        $('nav a').each(function () {
            var currLink = $(this);
            var refElement = $(currLink.attr("href"));
            if (refElement.position().top - 40 <= scrollPos && refElement.position().top - 40 + refElement.height() > scrollPos) {
                $('nav a').removeClass("active");
                currLink.addClass("active");
            }
            else{
                currLink.removeClass("active");
            }
        });
    }

谢谢

Answer 1

http://jsfiddle.net/Lxzwfk0u/2/

我所做的唯一改变是在这里：

var scrollPos = $(document).scrollTop();

当我之前回显这个变量时，它在 IE 和 FireFox 中都会给我一个 0 值。我想这是因为body 元素上没有滚动条，而是在document 元素上。