答案：CSS的fixed定位配合JavaScript可实现滚动监听效果。通过fixed固定元素位置，JavaScript监听滚动事件，动态添加类实现吸顶、导航高亮，并结合过渡提升体验。
使用 CSS 的 position: fixed 本身并不能直接实现“滚动监听”，但它可以配合 JavaScript 来创建基于滚动位置的视觉反馈效果。真正的“滚动监听”需要 JavaScript 检测滚动行为，而 fixed 定位用于固定元素在视口中的位置，两者结合能实现常见的吸顶、高亮导航等效果。
1. 使用 position: fixed 固定元素位置
将某个元素设置为固定定位，让它在页面滚动时始终保持在视窗的某个位置：
.sticky-nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #fff;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
z-index: 1000;
}
这个样式会让导航栏在滚动时始终停留在顶部。
2. 配合 JavaScript 实现滚动监听
通过 window.onscroll 或 IntersectionObserver 监听滚动事件，动态添加或移除类名来控制表现。
立即学习“前端免费学习笔记（深入）”；
例如：当页面滚动超过一定距离后，给导航栏添加 fixed 样式：
const nav = document.querySelector('.nav');
const offsetTop = nav.offsetTop;
window.addEventListener('scroll', () => {
if (window.pageYOffset >= offsetTop) {
nav.classList.add('sticky-nav');
} else {
nav.classList.remove('sticky-nav');
}
});
3. 实现侧边栏导航高亮（常见于文档页）
监听页面中各章节的可见状态，高亮对应导航项：
- 给每个内容区块设置 id，如：
<section id="section1"> - 使用
IntersectionObserver监听哪个区块进入视口 - 找到对应的导航链接并添加 active 类
const sections = document.querySelectorAll('section');
const navLinks = document.querySelectorAll('.sidebar-nav a');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
navLinks.forEach(link => {
link.classList.remove('active');
if (link.getAttribute('href') === `#${entry.target.id}`) {
link.classList.add('active');
}
});
}
});
}, { threshold: 0.5 });
sections.forEach(section => observer.observe(section));
4. 结合 CSS 过渡提升体验
为 fixed 元素添加平滑过渡效果，避免突兀出现：
.sticky-nav {
position: fixed;
top: -60px;
width: 100%;
transition: top 0.3s ease-in-out;
}
.sticky-nav.visible {
top: 0;
}
JavaScript 中控制 visible 类的添加时机，实现淡入或滑入动画。
基本上就这些。CSS 的 fixed 定位提供视觉固定能力，JavaScript 负责监听滚动并触发样式变化，两者配合就能实现常见的滚动交互效果。不复杂但容易忽略细节，比如 z-index 层级和移动端兼容性。
