jQuery 粘性标题在特定高度闪烁答案

【问题标题】：jQuery sticky header flashes at specific heightjQuery 粘性标题在特定高度闪烁
【发布时间】：2013-10-23 14:00:43
【问题描述】：

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

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

这是我正在尝试的代码：

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

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

试试看

     $(window).scroll(function () {

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

【讨论】：

它做同样的事情。

【解决方案2】：

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

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;
}

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

【讨论】：

我经常使用它来创建 100% 高度的块元素，但它如何转换为 a) 内容远高于视口高度或 b) 内容太短而无法推动高度的网站html 和 body 到完整的视口高度（并且您需要能够考虑布局中的任何一个潜力）？在前一种情况下，您需要使用窗格或类似的东西 (overflow:scroll) 还是开箱即用？在后者中，您首选的跨浏览器解决方案是什么？
只是好奇你对这一切的看法，因为我发现在纯 CSS 和兼容IE8+。

【解决方案3】：

这是因为当您将导航 div 设置为 position:fixed 时，您正在缩短文档的长度（按该 div 的高度），这会导致滚动条消失，从而导致 @987654324 @ 值为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();
});

【讨论】：

非常感谢，很有道理。但是是否可以动态使用高度而不是使用固定值（70）？
@user2738640 你可以动态地做到这一点，只要确保你抓住scroll()处理程序之外的高度，否则你会遇到同样的问题，并使用.outerHeight()来获得你有的填充它。
我正在尝试，未能成功，如果您能更新示例将不胜感激。
提供的 jsfiddle 在 Chrome 下似乎不起作用。它不断向上滚动（闪烁）。不过，它在 Firefox 下运行良好。
它很棒。非常感谢。

【解决方案4】：

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

【讨论】：

谢谢，但是我找不到修改后的代码，你能再粘贴一下链接吗？谢谢。