AwadGorg
2 months ago

Toggle navbar display on page scroll

Posted 2 months ago by AwadGorg

Hello, I have this code jquery

 /* When the user scrolls down, hide the navbar. When the user scrolls up, show the navbar */
var lastScrollTop = 0;
$(window).scroll(function() {
    var scrollTop = $(this).scrollTop();
    if (scrollTop > lastScrollTop) {
        $('#main_header_con').hide();
        $(".main_page_nav").addClass('nav_cat_sticky');
    } else {
        $('#main_header_con').show();
    }
    lastScrollTop = scrollTop;
});

right now it hides parts of the navbar when the user scrolls down but it show them again when the user switches the scroll to up what I wan t is to keep the parts of the nav hidden when the user scrolls down and only show them when the user scroll top and reach the very top of the page cuz right now if the user scroll to the top from the middle of the page the nav will show and I don't want that want the nav to show only when the user reach the very top of the page and thanks.

Please sign in or create an account to participate in this conversation.