滚动一段距离后固定头部？

Question

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

我正在使用bootstrap affix。以下是我的代码：

<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在网页滚动时固定在顶部（当该元素到达顶部位置时），就像你之前提到的那个网站一样？我希望可以看到header-1和header-2，但是在滚动页面时，header-1应该被隐藏，而header-2则应该固定在最顶部。谢谢。

- user3348051

---

可能是重复的问题：如何使一个div在滚动到屏幕顶部后固定在那里？ - Ciro Santilli OurBigBook.com

使用jQuery和CSS创建粘性页眉。http://www.kvcodes.com/2017/03/jquery-simple-sticky-header-on-scroll/ - Kvvaradha

Answer 1

请查看此Jsfiddle，您可以检查滑块的位置并相应地添加类。

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

- John

---

谢谢。我一直期待着完全用BS来解决这个问题。 :) - user3348051

这难道不会导致一些滚动瓶颈吗？ - Miguel

任何滚动事件监听器都会导致瓶颈，这就是为什么您应该始终对这些监听器进行节流或去抖动处理。 - Gaston Sanchez

滚动浏览器窗口500像素后，header-2 显示，而 header-1 不显示，这种情况可能吗？ - Shiplu

Answer 2

使用 jQuery 查看此示例 http://jsfiddle.net/5n5MA/2/

var fixmeTop = $('.fixme').offset().top; // Get initial position
$(window).scroll(function() {            // Assign scroll event listener
var currentScroll = $(window).scrollTop(); // Get current position
if (currentScroll >= fixmeTop) { // Make it fixed if you've scrolled to it
    $('.fixme').css({
        position: 'fixed',
        top: '0',
        left: '0'
    });
} else {                       // Make it static if you scroll above
    $('.fixme').css({
        position: 'static'
    });
}

});

- Shailendra Sharma

---

这很有帮助，但我正在寻找一个特定于Bootstrap的答案。谢谢回复 :) - user3348051

Answer 3

使用Bootstrap.affix()实现的引导答案

$('.header-2').affix({
        offset: {
                 top: function () {
                      return (this.top = $(".header-2").offset().top);
                }
        }
});

这还需要CSS来进行固定定位（参见文档）。

affix插件在三个状态之间切换，分别是.affix、.affix-top和.affix-bottom。你必须自己提供这些类的样式（与此插件无关），以处理实际位置。

.header-2.affix {
   top: 0;
}

在Bootply上有一个工作示例：http://www.bootply.com/S03RlcT0z0

- Pete TNT

Answer 4

<style>
  .header {
    top: 0%;
    left: 0%;
    width: 100%;
    position:fixed;
}
</style>

非常抱歉，我没有仔细看你的问题。

这个链接可能会对你有所帮助：固定标题和Bootstrap Affix / Scrollspy的问题 - 无法跳转到正确位置

- TooJuniorToCode

---

我想看到 header-1 和 header-2，但是一些滚动应该隐藏 header-1 并将 header-2 固定在最顶部。 - user3348051

@John 尝试看看这个，如果我对你的问题没有误解... 你坚持只使用Bootstrap吗？https://dev59.com/HHM_5IYBdhLWcg3wzmvM - TooJuniorToCode

Bootstrap已经有附加功能了，如果能够只使用BS完成工作，我会很高兴。为什么要给浏览器带来麻烦并提供另一个脚本，如果它已经在BS中了呢？！！ - user3348051

我给你点赞是因为你值得拥有它 :) 不要太依赖 BS，是的，它们很好，但会让你像我一样变懒 :D - TooJuniorToCode

好的，谢谢你，伙计。我会考虑你的建议的。;) - user3348051