我不知道如何正确表达这一点,但我想做的是让顶部栏( http://puu.sh/iNdBj/7f11027db0.png )在向下滚动时折叠并在回到顶部时重新出现,我想让底部栏填充顶栏的位置。
目前的两个导航栏是静态导航栏,其中底部有一个偏移量
〜马特
最佳答案
试试这个:
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 可能会变得不稳定)。
关于javascript - Bootstrap 2 navbars 1 navbar 动态关闭,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31224251/