Bootstrap 2 navbars 1 navbar 动态关闭答案

【问题标题】：Bootstrap 2 navbars 1 navbar dynamic closingBootstrap 2 navbars 1 navbar 动态关闭
【发布时间】：2015-09-22 07:48:08
【问题描述】：

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

~马特

【问题讨论】：

你能提供一个jsfiddle吗？

标签： javascript jquery css twitter-bootstrap collapse

【解决方案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 可能会变得不稳定）。

【讨论】：