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

【问题标题】：Navbar hide on scroll down, shows on scroll up but keep mobile full page menu导航栏在向下滚动时隐藏，在向上滚动时显示但保留移动整页菜单
【发布时间】：2020-11-03 09:31:22
【问题描述】：

我有一个导航栏，当我向下滚动时会隐藏，当我向上滚动时会显示。效果很好。

但在较小的屏幕上，我有一个全宽菜单，该菜单通过汉堡切换进行扩展，当我滚动时甚至隐藏。有解决办法吗？

我还想知道导航栏在页面顶部时是否始终可见。

代表感谢。

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

【问题讨论】：

标签： javascript html jquery css

【解决方案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');
  });
  });

【讨论】：