基于JavaScript实现粘性导航栏求助：仿Nike导航代码未生效

现有代码的核心问题 #

1. scroll事件被覆盖：先通过addEventListener绑定了滚动事件，又给window.onscroll直接赋值函数，后者会完全覆盖前者，导致fixNav逻辑失效。
2. 缺少导航栏显示/隐藏的核心样式：现有CSS仅隐藏了子菜单，未定义导航栏本身的显示状态，以及fixed-nav、show-nav类对应的视觉表现。
3. 未实现向上滚动显示逻辑：现有代码只处理了顶部固定和底部显示，没有判断滚动方向的逻辑，无法实现向上滚动时弹出导航栏的需求。

修复后的完整代码 #

HTML（调整结构，明确导航栏容器层级） #

<nav id="navbar-container">
  <ul class="nav-list" id="navbar">
    <li>
      <a href="#">Test</a>
      <ul class="sub-menu">
        <li><a href="#">1</a></li>
      </ul>
    </li>
  </ul>
</nav>

CSS（补充导航栏显示/隐藏、固定定位的核心样式） #

/* 导航栏容器基础样式：默认隐藏，通过top值控制显示/隐藏 */
#navbar-container {
  position: fixed;
  top: -100%;
  width: 100%;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  transition: top 0.3s ease;
  z-index: 999;
}

/* 初始状态：页面顶部时显示导航栏 */
#navbar-container.initial-show {
  top: 0;
}

/* 滚动到顶部后固定导航栏 */
#navbar-container.fixed-nav {
  top: 0;
}

/* 底部或向上滚动时显示导航栏 */
#navbar-container.show-nav {
  top: 0;
}

.sub-menu {
  visibility: hidden;
}

.nav-list {
  margin: 0;
  padding: 1rem;
  list-style: none;
  display: flex;
}

.nav-list a {
  text-decoration: none;
  color: #333;
  padding: 0.5rem 1rem;
}

/* 避免固定导航栏遮挡页面内容 */
body.fixed-nav-padding {
  padding-top: var(--nav-height);
}

JavaScript（合并滚动事件，添加滚动方向判断） #

const navContainer = document.querySelector('#navbar-container');
const nav = document.querySelector('#navbar');
let topOfNav = nav.offsetTop;
let lastScrollY = window.scrollY;
// 定义导航栏高度变量，用于body内边距计算
document.documentElement.style.setProperty('--nav-height', `${nav.offsetHeight}px`);

// 初始状态显示导航栏
navContainer.classList.add('initial-show');

function handleScroll() {
  const currentScrollY = window.scrollY;
  const isScrollingUp = currentScrollY < lastScrollY;
  const isAtBottom = (window.innerHeight + currentScrollY) >= document.body.offsetHeight;

  // 处理顶部固定逻辑
  if (currentScrollY >= topOfNav) {
    document.body.classList.add('fixed-nav-padding');
    navContainer.classList.add('fixed-nav');
  } else {
    document.body.classList.remove('fixed-nav-padding');
    navContainer.classList.remove('fixed-nav');
  }

  // 处理向上滚动或底部显示导航栏逻辑
  if (isScrollingUp || isAtBottom) {
    navContainer.classList.add('show-nav');
  } else {
    // 非顶部固定状态下，向下滚动隐藏导航栏
    if (!navContainer.classList.contains('fixed-nav')) {
      navContainer.classList.remove('show-nav');
      navContainer.classList.remove('initial-show');
    }
  }

  lastScrollY = currentScrollY;
}

// 只绑定一次滚动事件，避免覆盖
window.addEventListener('scroll', handleScroll);

关键修复说明 #

• 合并滚动事件：将两个独立的滚动逻辑整合到一个函数中，解决事件覆盖问题，保证所有逻辑同时生效。
• 滚动方向判断：通过对比上一次和当前的滚动位置，判断用户是否向上滚动，触发导航栏显示。
• 完善样式逻辑：通过CSS的top属性和过渡动画实现导航栏的平滑弹出/隐藏，明确各类状态对应的视觉表现。
• 动态计算高度：使用CSS变量存储导航栏高度，避免硬编码，适配不同尺寸的导航栏。

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