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

Question

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

这是问题的演示，刷新几次并尝试向下滚动。我已将主体高度设置为 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()值成为0div.nav并且position:static它如果您继续向下滚动，将是一个无限循环。

这是我的快速解决方案：

$(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();
});

Answer 2

刚刚修改了JSbin。一探究竟。你真的很接近，只是做的比你需要的更多，喜欢在页面加载时设置粘性类，而不是在函数第一次运行时。让我知道这是否有帮助。

Answer 3

强烈推荐此布局的纯 CSS 解决方案。似乎没有人知道如何称呼这种方法，所以我一直将其称为绝对拉伸技术，但根据我的经验，它可以在移动设备和 PC 上完美运行，包括除 IE6 及以下版本之外的所有主要浏览器。这里有一些讨论。

body, .header, .nav, .mainContent{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

body, .mainContent {
    bottom: 0;
}

.header{
    height: 120px;
}

.nav{
    height: 70px;
    top: 120px;
}

.mainContent{
    top: 190px;
    overflow: auto;
}

你会发现你可以通过这种方式获得非常健壮、简洁、组织良好的布局，并且很容易遵循固定的页眉、页脚和侧边栏。

Answer 4

试试看

     $(window).scroll(function () {

            var scroll_top = $(this).scrollTop();
               if (scroll_top > 66) {//height of header
                 $('.nav').addClass('sticky');
              } else {
              $('.nav').removeClass('sticky');
              }
       });