jquery - 浏览器滚动粘性导航菜单的奇怪行为

Question

我正在尝试创建粘性导航菜单，该菜单应在网站加载时位于页面底部并在滚动时向上移动。当导航菜单在滚动时到达顶部时，它应该粘在页面顶部。现在它可以工作并坚持下去。但是当您缓慢滚动时会出现问题。只有在一些像素返回到它的位置之后，它才会比它应该上升的多。请注意，快速滚动时不会重现此行为！这种“过度滚动”的原因是什么？有什么建议可以让它在恰好到达顶部时停止移动？

html代码

<div class="menu"></div>

CSS代码

body {
    margin: 0;
    padding: 0;
    height: 2000px;
}
.menu {
    position: absolute;
    width: 100%;
    height: 100px;
    background: orange;
    top: auto;
    bottom: 0;
}

.fixed_menu {
    position: fixed;
    top: 0;
    bottom: auto;
}

jQuery代码

var menu_height = $('menu').height();
$(window).scroll(function(e){
    e.preventDefault();
    var window_height = $(window).height();
    var window_scroll = $(window).scrollTop();
    if(window_scroll >= window_height - menu_height){
        $('.menu').addClass("fixed_menu");
    }else{
        $('.menu').removeClass("fixed_menu");
    }
});

jsfiddle 示例http://jsfiddle.net/6JZf8/

Answer 1

您的代码中有一个小错字...

var menu_height = $('.menu').height();

你错过了 . 获取课程菜单

看：

http://jsfiddle.net/6JZf8/1/