做前端开发的兄弟，估计都被产品经理折磨过。每次改需求，总有人指着那个顶部导航栏说：“哎，这个滚动的时候，背景色能不能变一下？再加点阴影？还要吸顶，别动。” 听得人头大。其实吧，这玩意儿真没那么玄乎，就是几个CSS属性加上一点点JS监听。但要是处理不好，那页面卡得跟PPT似的，用户骂你没商量。
我最近就在搞一个类似B站或者爱奇艺那种风格的视频站，顶部那个Bar，看着简单，水很深。很多人一上来就想着用JS去监听scroll事件，然后改style。这思路没错，但太糙了。你想想，用户手指一滑，scroll事件触发频率有多高？浏览器渲染压力大不大？稍微不注意，低端机直接卡死。
咱们得换个思路。核心就两点：一是用CSS的backdrop-filter做毛玻璃，二是用IntersectionObserver或者requestAnimationFrame优化性能。别听那些老古董说兼容性不好，现在都2024年了，主流浏览器都支持，稍微给个降级方案就行。
具体咋弄？先说HTML结构。别搞太复杂，一个header，里面放logo和导航。关键是CSS。
`css
header {
position: fixed;
top: 0;
width: 100%;
height: 60px;
background: rgba(255, 255, 255, 0);
transition: background 0.3s, box-shadow 0.3s;
z-index: 1000;
}
header.scrolled {
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(10px);
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
`
看到没？transition是关键。让背景色和阴影有个过渡，别一下变过去，那样太生硬。然后JS部分，千万别直接在scroll里写逻辑。
`javascript
let lastScrollY = window.scrollY;
let ticking = false;
window.addEventListener('scroll', () => {
if (!ticking) {
window.requestAnimationFrame(() => {
const header = document.querySelector('header');
if (window.scrollY > 50) {
header.classList.add('scrolled');
} else {
header.classList.remove('scrolled');
}
ticking = false;
});
ticking = true;
}
});
`
这里用了requestAnimationFrame，保证在浏览器下次重绘前执行，性能提升不止一点点。我测过，在iPhone 8上，这么改完，滑动基本没延迟。之前用纯scroll监听，帧率掉到30以下，那体验简直没法看。
还有个小细节，就是顶部那个渐变遮罩。很多视频网站，比如YouTube，顶部其实有个透明的渐变，这样内容滑上去的时候，不会显得突兀。这个可以用CSS的linear-gradient做，或者用伪元素。
`css
header::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background: linear-gradient(to right, transparent, rgba(0,0,0,0.1), transparent);
opacity: 0;
transition: opacity 0.3s;
}
header.scrolled::after {
opacity: 1;
}
`
这样加一条细细的分隔线，质感立马就上来了。别小看这一行代码，有时候细节决定成败。
当然，如果你用的是Vue或者React，那更简单。用组件的状态管理，监听滚动距离，切换class就行。逻辑都一样，只是写法不同。
最后提醒一句，别搞得太花哨。顶部导航栏的核心是功能，不是炫技。用户是来看不视频的吗？不是，是来看内容的。如果顶部效果太抢戏，反而影响体验。我见过一个项目，顶部搞了个3D旋转，结果用户投诉说头晕。真是服了。
总之，视频网站顶部效果怎么做的？核心就是：固定定位、CSS过渡、性能优化、细节打磨。别整那些花里胡哨的，把基础打牢，比啥都强。你要是还搞不定，那可能得回去补补基础了。
希望这点干货能帮到你。要是觉得有用，记得点个赞，不然我白写这么多字。
