如何修改代码实现同页面多个sticky navbar生效？

你的代码只处理了第一个匹配类名的导航栏，要让所有同className的导航栏都生效，需要遍历所有元素并逐个处理每个导航栏的滚动状态，同时确保每个导航栏对应自己的内部容器。

修改后的JavaScript代码 #

// 页面滚动时执行处理函数
window.onscroll = function() {
  handleStickyNavbars();
};

// 获取所有带有sticky-navbar类的导航栏元素
const navbars = document.querySelectorAll(".sticky-navbar");

function handleStickyNavbars() {
  // 遍历每个导航栏，逐个处理粘性逻辑
  navbars.forEach(navbar => {
    // 从当前导航栏内部获取对应的future-page-wrapper容器（避免全局匹配混淆）
    const innerContainer = navbar.querySelector(".future-page-wrapper");
    // 获取当前导航栏的顶部偏移位置
    const stickyOffset = navbar.offsetTop;
    
    // 根据滚动位置判断是否添加/移除粘性类
    if (window.pageYOffset >= stickyOffset + 250) {
      navbar.classList.add("sticky");
      innerContainer.classList.add("page-wrapper");
    } else {
      navbar.classList.remove("sticky");
      innerContainer.classList.remove("page-wrapper");
    }
  });
}

关键改动说明 #

• 改用document.querySelectorAll获取所有匹配的导航栏元素，取代只取第一个元素的逻辑
• 从每个导航栏内部查询对应的future-page-wrapper容器，确保每个导航栏操作自己的内部元素，不会和其他标签页的导航栏混淆
• 在滚动事件中遍历所有导航栏，逐个判断各自的偏移位置，独立处理粘性状态切换

原CSS和HTML可保留（多标签页结构示例） #

如果你的多标签页结构和示例一致，每个标签页内都包含.sticky-navbar和内部的.future-page-wrapper，原CSS无需修改，只需确保每个标签页的导航栏结构如下：

<div class="page-wrapper">
  <div class="sticky-navbar">
    <div class="future-page-wrapper">
      <a href="#home">Home</a>
      <a href="#news">News</a>
      <a href="#contact">Contact</a>
    </div>
  </div>
</div>

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