Question

我想让我的topbar不仅在滚动时固定，而且还在减小其高度。因此，当我向下滚动时，我知道如何修复它，但我想知道如何通过重新调整其高度来提高网站的可见性。

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

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

Answer 1

你可以听scroll event - 这不是关于性能的最佳解决方案，而是目前快速且易于使用的解决方案。

$(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

滚动时HTML顶栏固定和重新调用

1 个答案: