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

Closed. This question is off-topic。它当前不接受答案。
                            
                        
                    
                
                            
                                
                
                        
                            
                        
                    
                        
                            想改善这个问题吗？ Update the question，所以它是on-topic，用于堆栈溢出。
                        
                        6年前关闭。
                                                                                            
                
        
我正在尝试创建粘性导航菜单，该菜单应在网站加载时位于页面底部，并在滚动时向上移。导航菜单在滚动时到达顶部时，应保持在页面顶部。现在它可以正常工作了。但是，当您缓慢滚动时，会出现问题。只有在一些像素返回到它的位置之后，它的上升幅度才超过应有的幅度。请注意，快速滚动时不会重现此现象！导致“过度滚动”的原因是什么？有什么建议可以使它在精确到达顶部时停止移动？

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/

最佳答案

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

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

您错过了。获取课程菜单

看到：

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

关于jquery - 浏览器滚动显示粘性导航菜单的奇怪行为，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/17255778/