如何使用原生JavaScript实现滚动时动态修改导航栏样式

完全可以实现，不需要依赖jQuery，核心通过监听滚动事件+类名操作即可完成需求，代码如下：

// 先获取导航栏DOM元素
const nav = document.getElementById('my-nav');

// 监听页面滚动事件
window.addEventListener('scroll', function() {
  // 兼容不同浏览器的滚动距离获取方式
  const scrollY = window.scrollY || document.documentElement.scrollTop;
  
  // 滚动距离≥400px时移除.bg-light，小于400px时恢复（不需要恢复可删除else分支）
  if (scrollY >= 400) {
    nav.classList.remove('bg-light');
  } else {
    nav.classList.add('bg-light');
  }
});

极简写法 #

可以用classList.toggle的第二个参数简化分支判断，代码更精简：

const nav = document.getElementById('my-nav');
window.addEventListener('scroll', () => {
  nav.classList.toggle('bg-light', (window.scrollY || document.documentElement.scrollTop) < 400);
});

可选性能优化 #

如果页面滚动逻辑复杂，可添加防抖减少事件触发频率，普通场景下不需要额外优化：

const nav = document.getElementById('my-nav');
let debounceTimer = null;

window.addEventListener('scroll', () => {
  clearTimeout(debounceTimer);
  debounceTimer = setTimeout(() => {
    nav.classList.toggle('bg-light', (window.scrollY || document.documentElement.scrollTop) < 400);
  }, 15);
});

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