How to Hide navbar on Scroll?

General
1

Hi,

I want to configure the navbar to be hidden on scrolling and when the scrolling stops, it will appear

How can I achieve that?

2 
let isScrolling;
$(window).on('scroll', function() {
    if (isScrolling) {
        clearTimeout(isScrolling);
    }
    
    if ($(window).scrollTop() < 50) {
        $('.navbar').css("opacity", "1");
        $('.navbar').css("pointer-events", "auto");
        return;
    }

    $('.navbar').css("opacity", "0");
    $('.navbar').css("pointer-events", "none");
    
    isScrolling = setTimeout(function() {
        $('.navbar').css("opacity", "1");
        $('.navbar').css("pointer-events", "auto");
    }, 500); 
});
1 Like
3

Hey, I want the same feature but I want the navbar to be visible only when scrolling up, instead of stop scrolling, Just as the Divhunt website’s navbar works. Can you share the modified code here for the same?

4

@Pakic I’ve followed the tutorial over and over again and done it, but my navbar seems to be static.