模拟具有滚动功能的玻璃形态固定导航器。单击预览中的按钮即可查看滚动效果。
登陆页面/作品集：导航器的表情会随着您的滚动而变化，给人一种精心设计的感觉。
适合深色主题：Glassmorphism 的“背景过滤器：模糊”在深色背景上看起来特别好。
利用position:sticky：通过利用CSS中的position:sticky而不是仅仅依赖JavaScript来最大化性能。
在滚动 10px 时触发：玻璃态射出现在中性时间。
填充变化：从“1.25rem”减少到“0.75rem”，使其更加紧凑并确保更广泛的内容区域。
通过**过渡**进行平滑：通过同时过渡背景、模糊、框阴影和填充这四个属性来创建自然变化。
更改滚动开始阈值:
// 提前触发 (5px)
if (demo.scrollTop > 5) { ... }
// 稍后触发 (50px)
if (demo.scrollTop > 50) { ... }
添加链接:
<li><a href="#services">服务</a></li>
<li><a href="#blog">博客</a></li>
<nav class="snav-bar" id="sticky-nav">
<div class="snav-logo">BRAND</div>
<ul class="snav-links">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Work</a></li>
</ul>
<button class="snav-cta">Contact</button>
</nav>
<style>
.snav-bar {
position: sticky;
top: 0;
z-index: 100;
width: 100%;
box-sizing: border-box;
padding: 1.25rem 2rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
transition: background 0.3s ease, backdrop-filter 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease;
}
.snav-bar.scrolled {
background: rgba(15,23,42,0.75);
backdrop-filter: blur(16px);
box-shadow: 0 1px 0 rgba(255,255,255,0.08), 0 8px 32px rgba(0,0,0,0.4);
padding: 0.75rem 2rem;
}
</style>
<script>
window.addEventListener('scroll', function() {
var nav = document.getElementById('sticky-nav');
if (window.scrollY > 10) nav.classList.add('scrolled');
else nav.classList.remove('scrolled');
});
</script>|浏览器 |兼容性状态 |
|--------|--------|
| Chrome 76+ | ✅ 完全兼容 |
|火狐 103+ | ✅ 兼容 |
| Safari 9+ | ✅ 完全兼容 |
|边缘 79+ | ✅ 完全兼容 |
一些较旧的浏览器不支持
backdrop-filter，但是background: rgba(...)的半透明背景足以作为后备。