Javascript 引导2导航栏1导航栏动态关闭

我不知道如何正确表达，但我想做的是使顶部栏（）在向下滚动时折叠，并使其在返回顶部时重新出现，我想使底部栏填充顶部栏的位置。 此时的两个导航条是静态导航条，底部导航条有偏移

~Matt

试试这个：

HTML

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

$（窗口）.on（'scroll'，function（）{
var top=$（窗口）.scrollTop（），
topHeader=$（'.header-top'）；
//如果top小于100（px），则删除隐藏类，否则，如果是，则添加隐藏类
top<100？topHeader.removeClass（'hide'）：topHeader.addClass（'hide'）；
});

这里有一个

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

---

这可能会有问题，这取决于项目的复杂程度和浏览器要求（在较旧的移动设备和iOS上固定的位置可能会变得不可靠）。

您能提供一个JSFIDLE吗？

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

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