jquery - HTML 顶部栏已修复并在滚动时重新调用

Question

我想让我的顶栏不仅在滚动时固定，而且还降低了它的高度。 所以当我向下滚动时，我知道如何修复它，但我想知道如何通过重新调整其高度来提高网站的可见性。

示例:http://www.kriesi.at/themedemo/?theme=enfold-overview

我试图搜索解决方案，但它只是关于固定的顶部栏，而不是关于它的大小。

Answer 1

您可以收听滚动事件 - 这不是关于性能的最佳解决方案，但目前是一种快速且易于使用的解决方案。

$(window).scroll(function() {
if ($(window).scrollTop() > ($(window).height()-80)) {
    $('.navigation').addClass('nav--closed')// > 100px from top - show div
}
else {
    $('.navigation').removeClass('nav--closed')// > 100px from top - show div
    // <= 100px from top - hide div
}
});

为此的 css 将是:

.navigation {
    position: fixed;
    top: 0;
    left: 0;
    height: 8em;
    width: 100%;
    z-index: 5;
    background-color: black;
    transform: translate3D(0,0,0);
    transition:height 0.4s ease-in-out;
    color: white;
}

.navigation.nav--closed{
            background-color: $colorWhite;
            height: 2em;
}

看看这个FIDDLE它应该是不言自明的。

除了 scroll 之外，您还可以尝试使用 requestAnimationFrame 来更快、更高效! RAF