javascript - Bootstrap 2 navbars 1 navbar 动态关闭

Question

我不知道如何正确表达这一点，但我想做的是让顶部栏( http://puu.sh/iNdBj/7f11027db0.png )在向下滚动时折叠并在回到顶部时重新出现，我想让底部栏填充顶栏的位置。
目前的两个导航栏是静态导航栏，其中底部有一个偏移量

〜马特

Answer 1

试试这个:

HTML

<div class="body">
    <div class="header">
        <div class="header-top"></div>
        <div class="header-bottom"></div>
    </div>

    <div class="some-content"></div>
</div>

CSS

.header { position:fixed; top:0; left:0; width:100%; }
.header-top { background:darkblue; height:40px; width:100%; }
.header-top.hide { display:none; }
.header-bottom { background:darkgrey; height:40px; width:100%; }
.some-content {  height:900px; background:linear-gradient(#000, #fff);  }

jQuery

$(window).on('scroll', function(){
    var top = $(window).scrollTop(),
        topHeader = $('.header-top');

    // If top is less than 100 (px) remove the hide class, otherwise if it is add the hide class
    top < 100 ? topHeader.removeClass('hide') : topHeader.addClass('hide');   
});

这是 JSFiddle

基本上只是在窗口上使用 scrollTop 来检查滚动是否在页面的顶部 100px，然后使用顶部标题上的 CSS 类将其删除。我会说如果你想使用动画 - 坚持使用 CSS 并避免在 JS 中使用它们。

这可能是问题，这取决于您的元素变得多么复杂和浏览器要求(位置固定在较旧的移动设备上，iOS 可能会变得不稳定)。