小屏打开collapse折叠菜单时滚动页面Navbar导航栏消失问题如何解决

解决方案 #

你只需要修改JS逻辑，在滚动触发导航栏显隐的判断前，增加「折叠菜单是否处于展开状态」的校验即可，核心逻辑是：当小屏折叠菜单打开时，直接跳过滚动隐藏导航栏的逻辑。

修改后的完整JS代码 #

$('body').css('padding-top', $('.navbar').outerHeight() + 'px')

// 检测折叠菜单展开状态，展开时强制导航栏显示
$('#navbarSupportedContent').on('show.bs.collapse', function() {
  $('.smart-scroll').removeClass('scrolled-down').addClass('scrolled-up');
})

// 检测上下滚动逻辑
if ($('.smart-scroll').length > 0) {
    var last_scroll_top = 0;
    $(window).on('scroll', function() {
        // 新增判断：如果折叠菜单处于展开状态，直接终止逻辑，导航栏保持显示
        if ($('#navbarSupportedContent').hasClass('show')) {
          return;
        }
        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;
    });
}

改动说明 #

• 新增了Bootstrap collapse自带的show.bs.collapse事件监听，当折叠菜单触发展开操作时，主动把导航栏切到显示状态，避免刚好滚动到导航栏隐藏的位置时点开菜单看不到导航栏
• 滚动事件最开头增加折叠菜单是否有show类的判断，只要菜单处于展开状态，就不会执行滚动显隐导航栏的逻辑，导航栏会一直固定在顶部
• 关闭折叠菜单后会自动恢复原来的滚动显隐逻辑，不影响大屏设备的原有交互
• 如果你的折叠菜单元素ID不是navbarSupportedContent，请替换为自己实际的ID即可

内容的提问来源于stack exchange，提问作者Ahmed Radi