页面加载时滚动位置引发Navbar样式异常的JavaScript问题

你的问题出在两个核心点：

1. 页面刷新时未自动执行样式判断逻辑，只有滚动触发时才会切换样式，导致初始状态下导航栏样式错误；
2. 提前缓存的contentTop是基于页面加载时的视口位置计算的，当页面在滚动状态刷新时，该值已失效，且判断条件的计算逻辑存在重复偏移的问题。

修复代码 #

改用元素相对于文档顶部的固定偏移量，同时将样式切换逻辑抽为独立函数，页面加载时立即执行一次，确保初始样式正确：

// 获取目标元素和导航栏
const mainContent = document.getElementById('content');
const navbarFixed = document.querySelector('.navbar.fixed-top');

// 获取#content相对于文档顶部的固定偏移量（不受滚动状态影响）
const contentOffsetTop = mainContent.offsetTop;

// 抽离样式切换逻辑为独立函数
function updateNavbarStyle() {
  if (window.scrollY >= contentOffsetTop) {
    navbarFixed.classList.add("bg-light");
    navbarFixed.classList.remove("navbar-dark");
  } else {
    navbarFixed.classList.remove("bg-light");
    navbarFixed.classList.add("navbar-dark");
  }
}

// 页面加载时立即执行，确保刷新后初始样式正确
updateNavbarStyle();

// 滚动时触发样式更新
window.addEventListener("scroll", updateNavbarStyle);

补充适配说明 #

如果#content的父元素设置了position: relative，offsetTop会相对于父元素计算，此时可以用通用方法获取文档顶部偏移：

// 通用方法：计算元素相对于文档顶部的准确偏移
const getDocumentOffsetTop = (element) => {
  let offset = 0;
  while (element) {
    offset += element.offsetTop;
    element = element.offsetParent;
  }
  return offset;
};

// 替换原来的contentOffsetTop赋值
const contentOffsetTop = getDocumentOffsetTop(mainContent);

另外，建议将代码包裹在DOMContentLoaded事件中，确保DOM加载完成后再执行，避免出现元素获取失败的情况：

document.addEventListener('DOMContentLoaded', () => {
  // 上述修复代码放在此处
});

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