Navbar hide on scroll down, shows on scroll up but keep mobile full page menu

Question

I have a navbar that hides when I scroll down and shows up when I scroll up. That works fine.

But on smaller screens I have a full width menu that expands with a hamburger toggle and when I scroll even then hides. Is there a solution to fix that?

I also wonder if the navbar always could be visible when it's on top of the page.

Thanks on behalf.

My website

// detect scroll top or down
if ($('.smart-scroll').length > 0) { // check if element exists
    var last_scroll_top = 0;
    $(window).on('scroll', function() {
        scroll_top = $(this).scrollTop();
        if(scroll_top < last_scroll_top) {
            $('.smart-scroll').removeClass('scrolled-down').addClass('scrolled-up');
        }
        else {
            $('.smart-scroll').removeClass('scrolled-up').addClass('scrolled-down');
        }
        last_scroll_top = scroll_top;
    });
}

Answer 1

Found the solution:

// detect scroll top or down
if ($('.smart-scroll').length > 0) { // check if element exists
    var last_scroll_top = 0;
    $(window).on('scroll', function() {
        scroll_top = $(this).scrollTop();
        if(scroll_top > last_scroll_top && last_scroll_top > 40) {
            $('.smart-scroll').removeClass('scrolled-up').addClass('scrolled-down');
        }
        else {
            $('.smart-scroll').removeClass('scrolled-down').addClass('scrolled-up');
        }
        last_scroll_top = scroll_top;
        
    });
}

$(document).ready(function(){
    $(".navbar").on('shown.bs.collapse', function(){
    $('.smart-scroll').removeClass('scrolled-down').addClass('scrolled-no');
  });
  $(".navbar").on('hidden.bs.collapse', function(){
    $('.smart-scroll').removeClass('scrolled-no').addClass('scrolled-down');
  });
  });