javascript - jQuery 粘性标题在特定高度闪烁

Question

当窗口向下滚动时，我使用以下代码使菜单变粘。如果窗口高度足以向下滚动整个标题区域，它工作正常，但它会产生问题，因为高度刚好接近滚动，在这种情况下，它开始闪烁并且不允许滚动。

这是问题的演示，刷新几次并尝试向下滚动。我已将 body 高度设置为 622px 以重现该问题:

http://jsbin.com/ipEROYO/1

这是我正在尝试的代码:

$(document).ready(function() {
    var stickyNavTop = $('.nav').offset().top;

    var stickyNav = function(){
        var scrollTop = $(window).scrollTop(); 
        if (scrollTop > stickyNavTop) { 
            $('.nav').addClass('sticky');
        } else {
            $('.nav').removeClass('sticky'); 
        }
    };

    stickyNav();

    $(window).scroll(function() {
        stickyNav();
    });
});

CSS:

.sticky {
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 100;
    border-top: 0;
}

Answer 1

这是因为当您将导航 div 设置为 position:fixed 时，您正在缩短文档的长度(按该 div 的高度)，这会导致滚动条消失，这导致 scrollTop() 值为 0，这导致 .nav div 为 position :static 一直往下滚动是无限循环。

这是我的 quick solution :

$(document).ready(function() {
    var height = $('.nav').outerHeight();
    $(window).scroll(function() {
            if($(this).scrollTop() > height)
            {
                $('.nav').css('position','fixed');
                $('body').css('padding-bottom',height+'px');
            }
            else if($(this).scrollTop() <= height)
            {
                $('.nav').css('position','static');
                $('body').css('padding-bottom','0');
            }
    });
    $(window).scroll();
});