javascript - 向下滚动然后修复导航故障

Question

我有一个困扰我的故障。问题是我的导航没有按我希望的那样正常工作。即使我没有到达导航的顶部，或者在使用 scrollTop 值传递了标题的高度之后，它也会跳转。我在 jsfiddle 中重新创建了问题.

var header_height = $('header').height();
//var main_nav = $('nav');
$(document).scroll(function () {
    if ($(this).scrollTop() >= header_height) {
        $('nav').addClass("fixed");
    } else {
        $('nav').removeClass("fixed");
    }
});

Answer 1

你应该取 .main_nav 的顶部而不是标题的高度来与 ScrollTop 进行比较。
将您上面发布的代码中的第一行更改为:

var header_height = $('.main_nav').position().top;

那应该行得通。 Here是工作 fiddle 。

希望这对您有所帮助。