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

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