吸顶导航
- position: sticky 一行实现基础吸顶（注意父容器不能 overflow:hidden）
- 哨兵 + IntersectionObserver：进入/离开视口时加 .stuck 类
- 吸顶瞬间加阴影 + 压缩 padding = 精致感来源
HTML
<style> #page { height: 220px; overflow: auto; } #page .pad { height: 120px; background: linear-gradient(135deg,#d2a8ff,#4a9eff); } #hdr { padding: 18px; text-align: center; background: #fff; color: #333; font-weight: 700; transition: .3s ease; } #hdr.stuck { position: sticky; top: 0; padding: 10px; box-shadow: 0 6px 18px rgba(0,0,0,.12); color: #d2a8ff; } .sentinel { height: 1px; } </style> <div id="page"> <div class="pad">页头区域（往下滚）</div> <div class="sentinel"></div> <div id="hdr">导航条 —— 吸顶时会缩起并加阴影</div> <div style="height:500px;padding:20px;color:#888">页面内容……继续滚动</div> </div> <script> var hdr = document.getElementById('hdr'); var sentinel = document.querySelector('.sentinel'); new IntersectionObserver(function (entries) { hdr.classList.toggle('stuck', !entries[0].isIntersecting); }, { root: document.getElementById('page') }).observe(sentinel); </script>
本节要点吸顶 = position:sticky 或 哨兵+IntersectionObserver；吸住时加阴影类提升精致感。
