Cue也打败了我。与他的答案类似,但不使用短代码。
jQuery
// scroll functions
$(window).scroll(function(e) {
// add/remove class to navbar when scrolling to hide/show
var scroll = $(window).scrollTop();
if (scroll >= 150) {
$('.navbar').addClass("navbar-hide");
} else {
$('.navbar').removeClass("navbar-hide");
}
});
CSS 导航栏淡出选项
Codeply 演示https://www.codeply.com/go/rTR1dcn4n6 https://www.codeply.com/go/rTR1dcn4n6
.navbar {
opacity: 1;
transition: opacity 0.5s ease;
}
.navbar-hide {
pointer-events: none;
opacity: 0;
}
CSS 导航栏向上滑动选项
Codeply 演示https://www.codeply.com/go/7Fab8Thufl https://www.codeply.com/go/7Fab8Thufl
.navbar {
transition: top 0.5s ease;
}
.navbar-hide {
top: -56px;
}
如果您喜欢更少的代码,Cue 的答案可能会更好,下面是他使用我的隐藏类的方法。
Cue 的 jQuery
// scroll functions
$(window).scroll(function(e) {
// add/remove class to navbar when scrolling to hide/show
$('.navbar')[$(window).scrollTop() >= 150 ? 'addClass' : 'removeClass']('navbar-hide');
});
CSS 导航栏淡出选项(与上面相同)
Codeply 演示https://www.codeply.com/go/KPnx8ewEED https://www.codeply.com/go/KPnx8ewEED
CSS 导航栏向上滑动选项(与上面相同)
Codeply 演示https://www.codeply.com/go/i82vYBGeu7 https://www.codeply.com/go/i82vYBGeu7