如何手动控制Bootstrap Navbar滚动时切换折叠/展开状态

问题原因 #

你直接操作DOM元素的collapse属性无法生效，是因为Bootstrap的折叠组件需要调用官方提供的JS API来控制状态，不能直接修改DOM属性实现切换。 #

实现方案 #

你的导航栏使用的是navbar-expand-sm类，对应断点为576px，即视口宽度≥576px时导航栏默认展开，小于该尺寸时默认折叠，我们只需要在大屏范围内监听滚动事件控制折叠状态即可，完整实现代码如下：

// 初始化Bootstrap折叠实例，需确保已引入Bootstrap 5 JS文件
const navCollapseEl = document.getElementById('navbarSupportedContent')
const bsCollapse = new bootstrap.Collapse(navCollapseEl, {
  toggle: false // 初始化时不自动切换状态
})
// 对应navbar-expand-sm的断点，更换expand规则时同步修改此处尺寸即可
const largeScreenQuery = window.matchMedia('(min-width: 576px)')

// 滚动事件加节流，避免频繁触发影响性能
let scrollTimer = null
window.addEventListener('scroll', () => {
  if (scrollTimer) clearTimeout(scrollTimer)
  scrollTimer = setTimeout(() => {
    // 小屏状态下直接跳过逻辑，保持原有折叠状态
    if (!largeScreenQuery.matches) return

    if (window.scrollY === 0) {
      // 滚动到顶部，展开导航栏
      bsCollapse.show()
    } else {
      // 离开顶部，折叠导航栏
      bsCollapse.hide()
    }
  }, 100)
})

// 可选功能：监听窗口尺寸变化，切到大屏时自动重置导航栏状态
window.addEventListener('resize', () => {
  if (largeScreenQuery.matches && window.scrollY === 0) {
    bsCollapse.show()
  }
})

注意事项 #

• 若你修改了导航栏的navbar-expand-*类，只需同步修改largeScreenQuery中的断点尺寸即可：
  • expand-sm → 576px
  • expand-md → 768px
  • expand-lg → 992px
  • expand-xl → 1200px

内容的提问来源于stack exchange，提问作者SA.93