如何用JavaScript判断网页是否滚动至顶部？实现菜单样式切换

判断页面是否在顶部的方法 #

直接通过window.scrollY属性判断即可——当它的值为0时，页面就处于顶部位置。这个属性在所有现代浏览器里都能正常工作，简单直接。

完整实现示例 #

以下是一套可直接复用的代码，包含HTML、CSS和JavaScript部分：

HTML结构

<nav id="main-nav">
  <ul>
    <li><a href="#home">首页</a></li>
    <li><a href="#about">关于</a></li>
    <li><a href="#contact">联系</a></li>
  </ul>
</nav>

<div class="content">
  <!-- 页面内容，需要足够长才能触发滚动 -->
  <p>这里是页面内容...</p>
  <p>这里是页面内容...</p>
  <p>这里是页面内容...</p>
  <p>这里是页面内容...</p>
  <p>这里是页面内容...</p>
  <p>这里是页面内容...</p>
  <p>这里是页面内容...</p>
  <p>这里是页面内容...</p>
  <p>这里是页面内容...</p>
  <p>这里是页面内容...</p>
</div>

CSS样式

/* 基础菜单样式 */
#main-nav {
  position: fixed;
  top: 0;
  width: 100%;
  padding: 1rem;
  transition: background-color 0.3s ease;
  background-color: transparent; /* 默认透明 */
}

#main-nav ul {
  list-style: none;
  display: flex;
  gap: 2rem;
  justify-content: center;
  margin: 0;
  padding: 0;
}

#main-nav a {
  color: #fff;
  text-decoration: none;
  font-size: 1.1rem;
}

/* 滚动后的菜单样式 */
#main-nav.nav-scrolled {
  background-color: #2c3e50; /* 滚动后显示的背景色 */
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* 给内容添加上边距，避免被固定菜单遮挡 */
.content {
  margin-top: 6rem;
  padding: 0 1rem;
}

JavaScript逻辑

const nav = document.getElementById('main-nav');

// 处理滚动事件的函数
function handleScroll() {
  // 判断是否滚动出顶部
  if (window.scrollY > 0) {
    nav.classList.add('nav-scrolled');
  } else {
    nav.classList.remove('nav-scrolled');
  }
}

// 初始化时先检查一次页面位置
handleScroll();

// 监听滚动事件，用requestAnimationFrame优化性能
window.addEventListener('scroll', () => {
  requestAnimationFrame(handleScroll);
});

代码说明 #

1. 判断逻辑：window.scrollY获取当前页面滚动的垂直距离，等于0时就是顶部状态。
2. 样式切换：通过添加/移除nav-scrolled类来改变菜单背景，配合CSS过渡动画实现平滑效果。
3. 性能优化：用requestAnimationFrame包裹滚动事件处理函数，避免频繁触发导致的性能问题。
4. 初始化检查：页面加载时先执行一次handleScroll，避免刷新页面时菜单状态异常。

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