自动隐藏任务栏需开启系统设置中的“自动隐藏任务栏”选项，具体路径为：右键任务栏→“任务栏设置”→“任务栏行为”→开启该开关；或通过“设置→个性化→任务栏→任务栏行为”启用，操作后任务栏将在非交互时自动缩入屏幕底部，鼠标悬停即恢复显示。
电脑端固定底部悬浮条（如 position: fixed; bottom: 0）无法“自动隐藏”——它本质就是始终可见的 UI 元素，所谓“自动隐藏”实际是误用需求或混淆了交互逻辑。真正在桌面端合理实现的，只有两种可靠路径：悬停显示（hover）、滚动触发显隐（scroll-triggered），且二者都需放弃纯 CSS 固定定位的“永远存在”假设。
hover 显示比 scroll-triggered 更稳定可靠
用 :hover 控制显隐是最轻量、兼容性最好、无 JS 依赖的方案，适合工具栏、操作按钮等次要入口。
- 必须将悬浮条包裹在有明确尺寸的父容器内（如
.bottom-bar-wrapper），否则:hover会因元素脱离文档流而失效 - 初始状态设
opacity: 0; visibility: hidden;，hover 时改为opacity: 1; visibility: visible;，避免突然弹出破坏布局 - 加
transition: opacity 0.2s ease-in-out;让显隐柔和，但不要用transform: translateY()动画——fixed 元素动画可能触发重排抖动 - 慎用
display: none切换：它会导致元素瞬间消失，无法过渡，且 Safari 下偶现渲染残留
scroll-triggered 显隐必须用 JS 监听 scroll 事件
想实现“滚到底部才出现”或“向上滚动时浮现、向下滚动时收起”，纯 CSS 无解，scroll 事件监听是唯一可行路径。
- 监听
window.scrollY或document.documentElement.scrollTop，而非element.scrollTop（后者对 body 不稳定） - 避免高频触发：用
requestAnimationFrame节流，而不是debounce，否则滚动中显隐会卡顿 - 判断逻辑要防抖：例如“用户向上滚动 ≥ 50px 才显示”，而不是“一动就显”，否则轻微晃动就会反复触发
- 不要直接操作
style.display—— 改用 class 切换（如.bar--hidden），便于 CSS 控制过渡和媒体查询适配
为什么不能用 overflow: hidden 或 visibility: hidden 全局控制？
这些属性作用于整个页面或 body，会彻底破坏滚动能力或导致内容不可见，与“悬浮条自动隐藏”的原始意图相悖。
-
body { overflow: hidden }→ 页面完全不能滚动，用户看不到被遮挡的内容 -
footer { visibility: hidden }→ 占位空间仍在，只是看不见，仍会遮挡下方内容（因为position: fixed已脱离文档流） - 试图用
z-index: -1把悬浮条藏到背后 → 它依然占据层叠上下文，且可能被其他 fixed 元素挡住，行为不可预测 - 移动端 Safari 键盘弹出后，
scrollY值可能突变，JS 显隐逻辑必须加resize和focusin/focusout补偿
真正容易被忽略的点是：所谓“自动隐藏”，往往暴露的是设计前提错误——如果这个条在桌面端多数时间不需要，就不该用 position: fixed；换成点击展开的抽屉式面板（position: absolute + transform）或右下角浮动按钮（position: fixed; right: 24px; bottom: 24px;），反而更符合桌面用户预期。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
