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

Question

这个问题困扰着我。问题是我的导航没有按我希望的那样正常工作。即使我没有到达导航的顶部，或者在我的 header 的高度超过 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

不是取 header 的高度，而是取 .main_nav 的顶部与 ScrollTop 比较。
将您上面发布的代码中的第一行更改为：

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

应该可以。 Here 是有效的 fiddle.

希望对您有所帮助。

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

Scroll down then fixed navigation glitch

javascript

jquery

html

css

nav