如何使用JavaScript/Jquery检测浏览器视口是否处于顶部位置？

这个需求在现代网页里特别常见，我给你分享几种实用的实现方案，从基础到优化版本都有：

1. 基础实现：监听滚动事件 #

这是最直观的方式，通过监听scroll事件判断视口是否处于顶部：

// 获取导航栏元素
const navbar = document.querySelector('.navbar');

// 定义判断并切换类的函数
function handleScroll() {
  // scrollY为0时，代表视口处于顶部位置
  const isAtTop = window.scrollY === 0;
  
  // 简洁写法：用toggle的第二个参数控制类的添加/移除
  navbar.classList.toggle('top-nav', isAtTop);
  
  // 也可以用传统的if-else写法：
  // if (isAtTop) {
  //   navbar.classList.add('top-nav');
  // } else {
  //   navbar.classList.remove('top-nav');
  // }
}

// 页面加载时先执行一次，确保初始状态正确
handleScroll();

// 绑定滚动事件
window.addEventListener('scroll', handleScroll);

小提示：window.scrollY返回当前页面滚动的垂直距离，兼容性很好，几乎所有现代浏览器都支持。

2. 优化版：添加防抖函数 #

scroll事件会在滚动过程中频繁触发（每秒可能几十次），直接执行函数会有不必要的性能损耗，我们可以用防抖来减少函数执行次数：

const navbar = document.querySelector('.navbar');

// 防抖工具函数：延迟执行目标函数，避免频繁触发
function debounce(func, delay = 100) {
  let timeoutId;
  return function() {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, arguments), delay);
  };
}

// 原处理逻辑不变
function handleScroll() {
  const isAtTop = window.scrollY === 0;
  navbar.classList.toggle('top-nav', isAtTop);
}

// 用防抖包装处理函数
const debouncedHandleScroll = debounce(handleScroll);

// 初始化执行
handleScroll();

// 绑定滚动事件，使用防抖后的函数
window.addEventListener('scroll', debouncedHandleScroll);

说明：防抖函数会在滚动停止后延迟delay毫秒再执行，这里设100ms是比较合适的平衡值，你可以根据自己的需求调整时长。

3. 现代版：使用Intersection Observer API #

如果想追求更优的性能，推荐用Intersection Observer（交叉观察器）——它不需要监听滚动事件，而是观察一个位于页面顶部的元素，当该元素可见时就代表视口在顶部：

<!-- 先在页面最顶部添加一个用于观察的隐藏元素 -->
<div class="top-indicator"></div>
<nav class="navbar">...</nav>

/* 给顶部指示器设置样式，确保它在视口顶部且不可见 */
.top-indicator {
  position: fixed;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  visibility: hidden;
}

const navbar = document.querySelector('.navbar');
const topIndicator = document.querySelector('.top-indicator');

// 配置交叉观察器参数
const observerOptions = {
  root: null, // 使用浏览器视口作为根容器
  threshold: 1.0 // 当元素完全出现在视口中时触发回调
};

// 回调函数：根据元素可见状态切换导航栏类
const observerCallback = (entries) => {
  const [entry] = entries;
  // isIntersecting为true时，代表视口在顶部
  navbar.classList.toggle('top-nav', entry.isIntersecting);
};

// 创建观察器实例并开始观察目标元素
const observer = new IntersectionObserver(observerCallback, observerOptions);
observer.observe(topIndicator);

优势：这种方式性能更好，因为浏览器会底层优化观察过程，不会像scroll事件那样频繁触发，适合对性能要求较高的大型项目。

不管用哪种方案，记得提前给导航栏的.top-nav类写好对应的CSS样式哦！

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