导航栏在向下滚动时隐藏，在向上滚动时显示但保留移动全页菜单

Question

我有一个导航栏，它在向下滚动时隐藏，向上滚动时显示。 这很好用。

但是在较小的屏幕上，我有一个全宽菜单，可以通过汉堡切换来扩展，当我滚动时甚至隐藏。 有没有办法解决这个问题？

我也想知道导航栏是否总是在页面顶部可见。

代为感谢。

我的网站

// 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

找到了解决办法：

// 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');
  });
  });