javascript - 滚动后标题粘滞？

Question

好的，这是我想问的一个例子，usatoday 的导航栏.

我正在使用 Bootstrap 词缀。这是我的代码

<div class="header">
  <div class="header-1">
    <h1>this is some logo</h1>
  </div>
  <div class="header-2">
    <h3>this is some heading</h3>
  </div>
</div>
<div class="content" style="height:2500px;">
</div>
<div class="footer">
    this is a footer
</div>

JavaScript

$('.header-2').affix({
});

如何让 div header-2 固定在顶部，(当有一些滚动并且 div header-2 刚刚到达顶部位置时) 从我之前提到的网站开始？

我很想看到 header-1 和 header-2，但是一些滚动应该隐藏 header-1 并粘贴 header-2 到最顶层。

谢谢

Answer 1

查看此 Jsfiddle

您可以检查 slider 的位置并相应地添加类

$(window).scroll(function () {
    if( $(window).scrollTop() > $('#header-2').offset().top && !($('#header-2').hasClass('posi'))){
      $('#header-2').addClass('posi');
    } else if ($(window).scrollTop() == 0){
      $('#header-2').removeClass('posi');
    }
});