Bootstrap 5移动端导航栏展开未滚动时触发滚动样式如何实现

实现方案 #

你使用的是Bootstrap 5导航栏组件，直接监听其内置的折叠菜单事件即可实现需求，不会影响原有滚动样式逻辑，且仅在小屏汉堡菜单触发时生效：

// 保留原有滚动监听逻辑
window.addEventListener("scroll", function () {
  let header = document.querySelector(".navbar");
  let windowPosition = window.scrollY > 0;
  header.classList.toggle("change-bg-nav", windowPosition);
});

// 新增汉堡菜单状态监听
const navCollapse = document.getElementById('navbarNavAltMarkup')
const header = document.querySelector(".navbar")
// 菜单展开时强制添加背景样式
navCollapse.addEventListener('show.bs.collapse', function () {
  header.classList.add('change-bg-nav')
})
// 菜单收起时判断：页面未滚动则移除样式，已滚动则保留原有逻辑
navCollapse.addEventListener('hide.bs.collapse', function () {
  if (window.scrollY === 0) {
    header.classList.remove('change-bg-nav')
  }
})

• 补充说明：你原有CSS中半透明白色的写法建议修正为标准rgba(255, 255, 255, 0.9)，避免老旧浏览器出现兼容问题。

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