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 example http://jsfiddle.net/6JZf8/

Answer 1

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

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

你错过了。获取课程菜单

请参阅：

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

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

1 个答案: