jQuery粘性标题在特定高度跳跃

Question

我正在尝试创建一个基本的粘性标题。 标头包含 2 个部分：top 和 main。当页面向下滚动时，我只想保持.main 的粘性（这样.top 就变得不可见了）。

我正在尝试以下代码，但它很生涩，如果内容具有特定高度，它不会让滚动，开始跳跃。我已经拍摄了视频来说明这个问题。请参见： http://www.screenr.com/Z89H

这是演示： http://jsfiddle.net/M33g4/

（由于屏幕高度不同，您可能看不到问题，在这种情况下，拖动结果窗口将其高度设置为 535px 左右）。

HTML：

<header>
    <div class="top"></div>
    <div class="main"></div>
</header>
<section>

</section>

jQuery：

$(window).scroll(function () {
   var height = $('header').outerHeight();

    if($(this).scrollTop() > height){
        $('header').addClass('sticky');    
    }else{
        $('header').removeClass('sticky');
    }       
});

Answer 1

我相信你现在已经解决了这个问题，但在遇到同样的问题后，我想出了一个解决方案：

问题是由于文档尺寸在折叠下方没有足够的余地以适应整个页眉的高度。这意味着如果访问者试图向下滚动，标题的粘性部分将被固定，但会立即自行解除。我相信这可能是导致问题的反弹效果，但我尚未测试验证这一点。

简而言之，我通过添加简单的检查来修复它，以通过比较主体的高度和窗口的高度来确保折叠下方有足够的空间。即正文高度减去窗口高度必须大于总标题高度。这是在我的实例中工作的代码：

  // Sticky sub navbar
  var sub_nav_height = $('#sub-nav').outerHeight();
  var total_height = $('#main-head').outerHeight();
  var header_height = total_height - sub_nav_height;
  var content_height;
  var y;
  $(window).scroll(function() {
    // Only make sticky if window is large enough not to cause jumping issue
    content_height = $('body').height() - $(window).height();
    if(content_height > total_height) {
      y = $(this).scrollTop();

      if($(this).scrollTop() > header_height) {
        $('#sub-nav').addClass('fixed');
      } else {
        $('#sub-nav').removeClass('fixed');
      }
    }
  });

我认为有两个注意事项绝对适合我的场景。首先是每次触发滚动事件时都添加了额外的计算，但这并没有给我带来任何性能问题。第二个是当访问者的窗口大小有问题时，粘性标题功能会被简单地禁用，但我再次对此没有任何疑虑，因为导航栏仍然可以看到。

Answer 2

检查一下

http://jsfiddle.net/M33g4/3/

JS

$(window).scroll(function () {
   var height = $('.top').height();

    if($(this).scrollTop() > height){
        $('.top').hide();    
        $('header').addClass('sticky');    
    }else{
        $('.top').show();
        $('header').removeClass('sticky');

    }

});

CSS

*{
    margin: 0;
    padding: 0;
}
header{
    width: 100%;
}

.top{
    height: 50px;
    background: blue;
}

.main{
    height: 70px;
    background: green;
}

section{
    height: 560px;
    background: yellow;
}

.sticky{
    position: fixed;
    width: 100%;

}

Answer 3

您应该定位到top，而不是整个header demo

$(window).scroll(function () {
   var height = $('header .top').outerHeight();

    if($(this).scrollTop() > height){
        $('header').addClass('sticky');    
    }else{
        $('header').removeClass('sticky');
    }

});

Answer 4

http://jsfiddle.net/M33g4/1/

$(window).scroll(function () {
   var height = $('.top').outerHeight();

    if($(this).scrollTop() > height){
        $('header').addClass('sticky');    
    }else{
        $('header').removeClass('sticky');
    }       
});

你猜错了高度。

更新：

闪烁问题是由高度变化引起的（由于position: fixed）

检查这个：http://jsfiddle.net/M33g4/6/

$(window).scroll(function () {
   var height = $('.top').outerHeight();

    if($(this).scrollTop() > height){
        if($('.main.sticky').length == 0) {
            $('header').append(
                $('.main').clone().addClass('sticky'));
        }
    }else{
        $('.main.sticky').remove();
    }
});

并仅粘贴.main：

.sticky{
    position: fixed;
    width: 100%;
    top: 0;
}

Answer 5

这对我有用：

将高度变量设置为 30：

$(window).scroll(function () {
   var height = 30;

    if($(this).scrollTop() >= height){
        $('header').addClass('sticky');    
    }else{
        $('header').removeClass('sticky');
    }

});

并将粘性类的 css 更改为以下内容：

.sticky{
    position: fixed;
    width: 100%;
    top: -30px;
    left: 0;
}

顶部是 -30 而不是 -40。为我工作！

Answer 6

检查此demo 中的内容如何捕捉到顶部，在标题下方，但不可见。您可能希望将结果窗口的大小调整为大约 500 像素。请问有解决办法吗？

    $(window).scroll(function () {
   var height = $('.top').outerHeight();
    if($(this).scrollTop() > height){
        $('header').addClass('sticky');    
    }else{
        $('header').removeClass('sticky');
    }

});