Question

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

以下是问题的演示，刷新几次并尝试向下滚动。我已将身高设置为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;
}

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

Answer 2

刚刚修改了JSbin。看看这个。你真的很接近，只是做了比你需要设置粘贴类加载页面而不是首次运行函数时做的更多。如果这有帮助，请告诉我。

Answer 3

试试

     $(window).scroll(function () {

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

Answer 4

强烈推荐这种布局的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;
}

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

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

4 个答案: