使用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
});

工作示例