I want to make a container that needs to hide when scrolling-down and needs to show scrolling-up. If not scrolling, I want it to be visible.
Here is my code block.
$.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>My scripts works fine but it works in different way and type!
Use this code to hide navbar when scrolling and, show it when you have stopped scrolling.
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
});
Working Example