javascript - 滚动后粘页眉？

Question

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

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

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

我怎样才能使 divheader-2固定在顶部，（当有一些滚动并且 divheader-2刚刚到达顶部位置时）就像我之前提到的网站一样？

我很想看到header-1and header-2，但是一些滚动应该隐藏header-1并粘header-2在最上面。

谢谢

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

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

});

Answer 3

自举答案使用Bootstrap.affix()

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

这也需要 CSS 来进行固定定位（参见Docs）。

词缀插件在三个类之间切换，每个类代表一个特定的状态：.affix、.affix-top 和 .affix-bottom。您必须自己提供这些类的样式（独立于此插件）以处理实际位置。

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

Bootply 的工作示例：http: //www.bootply.com/S03RlcT0z0

Answer 4

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

很抱歉没有仔细看你的问题。

这可能会帮助您解决固定标题和引导词缀/滚动间谍问题 - 不跳转到正确的位置