Amazon克隆项目导航栏滚动置顶功能实现求助

现有代码问题分析 #

• CSS中.navbar_top默认设置了position: fixed，导致初始状态导航栏就固定在顶部，不符合“滚动后才固定”的需求
• JS逻辑中添加的fixed-top类无对应CSS样式，类添加后无法生效
• 滚动事件未做性能优化，频繁触发可能影响页面流畅度

修正后的完整代码 #

CSS 部分 #

/* 初始导航栏样式 - 默认不固定 */
#navbar_top {
  width: 100%;
  background-color: #131921; /* 匹配Amazon导航栏背景色 */
  z-index: 1000; /* 确保导航栏在页面最上层 */
}

/* 滚动后触发的固定类样式 */
.fixed-top {
  position: fixed;
  top: 0;
  left: 0;
  animation: slideDown 0.3s ease-out; /* 添加平滑过渡动画 */
}

@keyframes slideDown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

/* 保留原.navbar布局样式 */
.navbar {
  padding: 0.5rem 1rem;
}

JavaScript 部分 #

document.addEventListener("DOMContentLoaded", function() {
  const navbarTop = document.getElementById('navbar_top');
  const navbar = document.querySelector('.navbar');
  let lastScrollTop = 0;
  const scrollThreshold = 50;

  // 防抖函数优化滚动事件触发频率
  function debounce(func, delay) {
    let timeoutId;
    return function() {
      clearTimeout(timeoutId);
      timeoutId = setTimeout(() => func.apply(this, arguments), delay);
    };
  }

  const handleScroll = debounce(function() {
    const currentScrollTop = window.scrollY;

    if (currentScrollTop > scrollThreshold) {
      // 滚动超过阈值，添加固定类
      navbarTop.classList.add('fixed-top');
      // 设置body内边距，避免内容被导航栏遮挡
      document.body.style.paddingTop = `${navbar.offsetHeight}px`;
    } else {
      // 回到顶部区域，移除固定类
      navbarTop.classList.remove('fixed-top');
      document.body.style.paddingTop = '0';
    }

    lastScrollTop = currentScrollTop;
  }, 100);

  window.addEventListener('scroll', handleScroll);
});

HTML 部分（无需修改，保持原结构） #

<!-- 侧边栏等其他内容保持不变 -->
<header id="navbar_top">
  <section class="navbar">
    <!-- 原导航栏内容保留 -->
  </section>
</header>

关键修改说明 #

• 分离初始状态与固定状态样式：初始导航栏使用默认布局，滚动后通过fixed-top类切换固定定位
• 添加防抖处理：减少滚动事件触发次数，提升页面性能
• 加入过渡动画：让导航栏固定/取消固定的过程更自然，贴近Amazon的交互体验
• 提升层级优先级：通过z-index确保导航栏不会被其他页面元素遮挡

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