使用 Intersection Observer 实现滚动时自适应收缩导航栏
在网页开发中，导航栏是用户交互的核心组件。当页面内容较多需要滚动浏览时，让导航栏根据滚动状态自适应收缩，既能保证页面顶部空间的最大化利用，也能提升用户的浏览体验。传统的实现方式通常依赖监听滚动事件，通过计算滚动距离来手动调整导航栏样式，这种方式不仅逻辑繁琐，还可能因为频繁触发滚动事件导致性能问题。
Intersection Observer API 是浏览器提供的一个高效原生接口，用于异步观察目标元素与祖先元素或视口的交叉状态，不需要频繁计算偏移量，性能表现更优。下面我们就用这个API实现滚动时的自适应收缩导航栏。
实现思路
整个功能的核心逻辑可以拆解为三个步骤：
- 在页面顶部放置一个「哨兵元素」，这个元素高度很小，不会干扰页面正常布局
- 使用 Intersection Observer 观察这个哨兵元素，当它离开视口（即页面开始向下滚动）时，给导航栏添加收缩样式
- 当哨兵元素重新进入视口（即页面滚回顶部）时，移除导航栏的收缩样式
完整代码实现
下面是包含HTML结构、CSS样式和JavaScript逻辑的完整示例，代码中已经添加了详细注释说明每一步的作用：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自适应收缩导航栏</title>
<style>
/* 重置默认样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Microsoft YaHei", sans-serif;
line-height: 1.6;
}
/* 哨兵元素，高度设为1px，放在导航栏上方 */
.sentinel {
height: 1px;
width: 100%;
}
/* 导航栏默认样式 */
.navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 80px;
background-color: #2c3e50;
color: #fff;
display: flex;
align-items: center;
padding: 0 20px;
transition: height 0.3s ease, background-color 0.3s ease;
z-index: 1000;
}
/* 导航栏收缩后的样式 */
.navbar.shrink {
height: 50px;
background-color: rgba(44, 62, 80, 0.9);
}
.navbar h1 {
font-size: 24px;
transition: font-size 0.3s ease;
}
/* 收缩后标题变小 */
.navbar.shrink h1 {
font-size: 18px;
}
/* 页面内容区域，添加上边距避免被固定导航栏遮挡 */
.content {
margin-top: 80px;
padding: 20px;
}
.content p {
margin-bottom: 20px;
font-size: 16px;
}
</style>
</head>
<body>
<!-- 哨兵元素，用于观察滚动状态 -->
<div class="sentinel"></div>
<!-- 导航栏 -->
<nav class="navbar" id="navbar">
<h1>我的网站导航</h1>
</nav>
<!-- 页面内容，用于撑开页面产生滚动 -->
<div class="content" id="content">
<p>这是第一段内容，用于填充页面高度，让页面可以滚动。</p>
<p>Intersection Observer API 可以异步观察目标元素与视口的交叉状态，不需要频繁监听滚动事件，性能更好。</p>
<p>当页面向下滚动时，哨兵元素会离开视口，此时触发导航栏收缩的逻辑。</p>
<p>当页面滚回顶部时，哨兵元素重新进入视口，导航栏恢复原始大小。</p>
<p>为了实现页面滚动效果，这里添加多段重复内容：</p>
<p>前端开发中，导航栏的交互优化是提升用户体验的重要一环。自适应收缩的导航栏可以在用户浏览内容时减少顶部空间的占用，让用户看到更多内容。</p>
<p>传统的滚动监听方式需要在滚动事件中频繁计算页面偏移量，如果计算逻辑复杂，很容易造成页面卡顿。而 Intersection Observer 是浏览器原生实现的API，观察过程是异步的，不会阻塞主线程。</p>
<p>除了导航栏收缩，这个API还可以用于实现图片懒加载、无限滚动加载等常见功能，非常实用。</p>
<p>下面继续填充内容，让页面足够长：</p>
<p>JavaScript 是一门广泛应用于前端开发的脚本语言，随着前端工程化的发展，它的应用场景也越来越丰富。</p>
<p>CSS 负责页面的样式呈现，通过 transition 属性可以给导航栏的高度和背景色变化添加平滑过渡效果，让交互更自然。</p>
<p>HTML 是页面的结构基础，我们通过放置哨兵元素、导航栏、内容区域等标签，搭建出完整的页面结构。</p>
<p>最后一段填充内容，现在页面已经足够长，可以尝试向下滚动查看导航栏的收缩效果。</p>
</div>
<script>
// 获取哨兵元素和导航栏元素
const sentinel = document.querySelector('.sentinel');
const navbar = document.getElementById('navbar');
// 创建 Intersection Observer 实例
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
// entry.isIntersecting 为 true 表示哨兵元素进入视口，否则离开视口
if (entry.isIntersecting) {
// 滚回顶部，移除收缩样式
navbar.classList.remove('shrink');
} else {
// 向下滚动，添加收缩样式
navbar.classList.add('shrink');
}
});
}, {
// root 为 null 表示相对于视口观察
root: null,
// 阈值设置为0，只要元素刚离开视口就触发回调
threshold: 0
});
// 开始观察哨兵元素
observer.observe(sentinel);
</script>
</body>
</html>代码说明
上面的示例中，我们首先定义了一个高度为1px的哨兵元素，它位于导航栏的正上方，因为导航栏是固定定位，所以哨兵元素初始时会在视口的顶部位置。
CSS部分中，我们给导航栏设置了默认的80px高度，以及收缩后的50px高度，同时添加了transition属性让样式变化有平滑过渡效果。内容区域设置了margin-top: 80px，避免内容被固定的导航栏遮挡。
JavaScript部分的核心是创建 Intersection Observer 实例，我们设置了观察的回调逻辑：当哨兵元素离开视口（entry.isIntersecting为false）时，给导航栏添加shrink类触发收缩；当哨兵元素重新进入视口时，移除shrink类恢复原始状态。最后调用observer.observe(sentinel)开始观察哨兵元素。
优势总结
相比传统的滚动事件监听方式，使用 Intersection Observer 实现导航栏收缩有以下优势：
- 性能更好：不需要在滚动时频繁计算滚动距离，观察过程是异步的，不会阻塞主线程
- 逻辑更简洁：不需要处理复杂的条件判断，只需要根据元素的交叉状态切换样式即可
- 兼容性可控：现代浏览器基本都支持这个API，如果需要兼容旧版浏览器，也可以引入对应的polyfill来兜底