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上固定的位置可能会变得不稳定）。

Bootstrap 2导航栏1导航栏动态关闭

1 个答案: