javascript - jQuery sticky header 在特定高度跳转

Question

我正在尝试创建一个基本的粘性 header 。 header 包含 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');
      }
    }
  });

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