滚动时导航栏自动隐藏需用javascript监听scroll事件并记录lastscrolly，向下滚动超阈值时添加hidden类通过transform隐藏，向上滚动时移除；须用requestanimationframe节流、初始lastscrolly设为-1防误判，并适配非window滚动场景。
滚动时导航栏自动隐藏的 CSS + JS 实现
直接用 position: sticky 无法实现“滑动隐藏”，它只支持固定吸附，不响应滚动方向。真正能判断向上/向下滚动并隐藏导航栏的，必须靠 JavaScript 监听 scroll 事件 + 记录上一次 scrollTop 值。
核心逻辑很简单：当页面向下滚动且当前滚动位置比上次更大时，隐藏导航栏；向上滚动时再显示。但容易忽略滚动抖动、节流、初始状态等问题。
- 给
<nav></nav>添加 class"navbar"，方便样式和 JS 选择 - 初始状态设为
transform: translateY(0)，后续通过修改transform隐藏（比display: none更利于动画和布局稳定） - 用
requestAnimationFrame节流，避免高频触发导致卡顿 - 记录
lastScrollY，每次 scroll 时对比：若window.scrollY > lastScrollY且超出阈值（比如 10px），则添加"hidden"class
示例关键 JS 片段：
let lastScrollY = 0;
const navbar = document.querySelector('.navbar');
window.addEventListener('scroll', () => {
const currentScrollY = window.scrollY;
if (currentScrollY > lastScrollY && currentScrollY > 10) {
navbar.classList.add('hidden');
} else if (currentScrollY
<h3>隐藏动画必须用 transform 而不是 top/margin</h3>
<p>用 <code>top</code> 或 <code>margin-top</code> 控制隐藏会导致重排（reflow），动画卡顿，且可能破坏原有布局流。正确做法是只改 <code>transform: translateY()</code>，它走 GPU 加速，不触发重排。</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5493" title="html-to-pptx"><img
src="https://img.php.cn/upload/skill/000/000/081/179051045119472.jpg" alt="html-to-pptx" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill5493" title="html-to-pptx" class="overflowclass">html-to-pptx</a>
<p class="overflowclass">将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。</p>
</div>
<a rel="nofollow" href="/xiazai/skill5493" title="html-to-pptx" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<p>CSS 示例：</p>
<pre class="brush:php;toolbar:false;">.navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
transition: transform 0.3s ease-out;
}
.navbar.hidden {
transform: translateY(-100%);
}
-
transition必须写在非.hidden状态上，否则首次隐藏无动画 -
translateY(-100%)表示完全移出视口顶部，数值不能写成px绝对值，否则在不同高度导航栏下会失效 - 如果导航栏有
box-shadow或背景渐变，隐藏时建议同步加opacity: 0避免边缘残留
移动端 touchstart/touchmove 会干扰 scroll 判断
在 iOS Safari 和部分安卓浏览器中，快速滑动时 scroll 事件可能滞后或丢失，仅靠它判断滚动方向不可靠。必须补充 touch 事件做兜底。
- 监听
touchstart记录起始pageY - 在
touchmove中实时对比移动方向，临时覆盖lastScrollY判断逻辑 - touch 结束后（
touchend）恢复 scroll 判断，避免长按误触发 - 注意：不要同时绑定
scroll和touchmove做重复操作，否则动画会跳变
兼容性与边界情况处理
这个功能在桌面端基本稳定，但在 iOS 上有三个典型坑：
- iOS Safari 滚动惯性结束时，
scroll事件可能不触发最后一次scrollY回弹，导致导航栏卡在隐藏状态 —— 解决方案：加setTimeout在touchend后 300ms 强制检查并恢复显示 - 页面底部内容不足一屏时，滚动条不可见，
window.scrollY始终为 0，整个逻辑失效 —— 应提前判断document.body.scrollHeight > window.innerHeight - 使用
overflow: hidden或第三方滚动库（如 iScroll）时，原生window.scrollY不更新 —— 必须改用目标容器的scrollTop
最易被忽略的是：没考虑用户手动拖拽滚动条到顶部又快速向下滚的情况，此时 lastScrollY 初始值应设为 -1 而非 0，避免首次滚动就误判隐藏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
