如何在使用jQuery或JS滚动时隐藏和显示div

Question

我想制作一个容器，当向下滚动时需要隐藏，需要显示向上滚动。如果不滚动，我希望它是可见的。

这是我的代码块。

$.fn.scrollEnd = function(callback, timeout) {
$(this).scroll(function() {
var $this = $(this);
if ($this.data('scrollTimeout')) {
clearTimeout($this.data('scrollTimeout'));
}
$this.data('scrollTimeout', setTimeout(callback, timeout));
});
};
$(window).scroll(function() {
$('#navbar').fadeOut();
});
$(window).scrollEnd(function() {
$('#navbar').fadeIn();
}, 700);

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.3/font/bootstrap-icons.css" rel="stylesheet"/>
<!--add by me 26/05/22-->
<div id="navbar">
<footer class="mobile_footer">
<div class="mobile_footer_inner">
<nav class="navbar fixed-bottom bg-white">
<a href="#" class="menu_item">
<i class="bi bi-house"></i>
</a>
<a href="#" class="menu_item">
<i class="bi bi-chat-dots"></i>
</a>
<a href="/Ad/PostAd" class="menu_item menu_item__middle_plus">
<i class="bi bi-plus-circle"></i>
</a>
<a href="#" class="menu_item">
<i class="bi bi-bookmark"></i>
</a>
<a href="#" class="menu_item">
<i class="bi bi-person"></i>
</a>
</nav>
</div>
</footer>
</div>
<!--end-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

我的脚本工作得很好，但它以不同的方式和类型工作!

Answer 1

使用此代码在滚动时隐藏导航条，并在停止滚动时显示它。

window.addEventListener("scroll", function () {
$("#navbar").fadeOut();     //hide when scrolling
clearTimeout($.data(this, 'scrollTimer'));
$.data(this, 'scrollTimer', setTimeout(function() {
$("#navbar").fadeIn(); 
}, 550));   //show after this much milliseconds when scrolling has stopped
});

工作示例