最稳妥做法是在首页body加home-page类，css限定样式作用域；避免用display:none隐藏导致padding-bottom残留引发布局跳变，应动态插入或移除dom节点。
如何让 position: fixed 底部悬浮条仅作用于首页
直接靠 CSS 无法判断“当前是不是首页”，必须借助 HTML 结构或 JS 控制。最稳妥的做法是：在首页的 上加一个专属 class，比如 home-page，然后用 CSS 限定样式作用域。
常见错误是试图用 display: none 在非首页隐藏它——但 position: fixed 元素脱离文档流，即使隐藏了，body 的 padding-bottom 仍需保留，否则非首页内容会突然上移，造成布局跳变。
- 首页 HTML 中写：
- CSS 改为：
.home-page { padding-bottom: 56px; } .home-page .bottom-bar { position: fixed; bottom: 0; left: 0; right: 0; } - 非首页的
不加该 class，自然不匹配规则，悬浮条不会渲染（前提是它本身也只在首页 HTML 里存在） - 如果悬浮条 DOM 是全局存在的（比如通过 JS 插入），那就得配合 JS 判断 URL：
if (window.location.pathname === '/' || window.location.pathname === '/index.html') { ... }
用 JavaScript 动态控制显示/隐藏时要注意什么
单纯用 element.style.display = 'none' 或 classList.remove('show') 不够——因为 fixed 元素的定位不受 display 影响，只要它在 DOM 中，就仍会参与层叠上下文，且可能干扰焦点、键盘导航或屏幕阅读器。
更干净的做法是：只在首页把 DOM 插入，其他页面完全不创建它。或者用 remove() 真删掉节点，而不是隐藏。
- 不要用
visibility: hidden：它保留占位和事件响应能力，用户仍可能 tab 进去 - 避免在非首页保留
padding-bottom：否则页面底部会多出空白，滚动高度异常 - 如果用了路由库（如 React Router、Vue Router），监听
location变化比解析pathname更可靠
为什么不能只靠 @media 或 :not() 选择器实现
CSS 没有 “当前页面路径” 伪类，:not(.home-page) 只能排除已有 class 的元素，不能动态识别 URL；@media 是针对设备特征（宽高、横竖屏等），跟路由无关。
有人试过用 body:not([data-page="home"]) .bottom-bar，但这要求你手动给每个页面的 加 data-page 属性——和加 class 本质一样，只是语义略不同，没省事，还容易漏写。
真正难处理的不是“怎么隐藏”，而是“要不要留 padding”。首页有悬浮条 → body 需要 padding-bottom；非首页没有 → 这个 padding 必须彻底移除，否则视觉和滚动行为都会错乱。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
