position: fixed 是唯一可靠选择。它脱离文档流、相对视口定位，不受动态内容高度影响，需设 bottom: 0、width: 100% 和足够 z-index；sticky 因依赖父容器高度，在商城页易失效。
底部悬浮购买条的定位方式选 position: fixed 还是 position: sticky？
position: fixed 是唯一可靠选择。很多新手试 position: sticky，结果发现滚动到页面底部就失效——因为 sticky 依赖父容器高度和边界限制，而商城页常有动态加载、高度不确定的主内容区，极易触发“粘不住”或突然消失。
-
fixed脱离文档流，直接相对于视口定位，不受内容高度影响 - 必须手动设置
bottom: 0和left: 0（或right: 0），并指定width: 100% - 需用
z-index确保层级高于其他元素（建议 ≥ 1000） - 注意：iOS Safari 在地址栏收起/展开时可能触发视口高度重算，导致条短暂错位，需避免依赖
vh单位做高度计算
如何避免悬浮条遮挡页面真实底部内容？
不是加个 margin-bottom 就完事。商城页底部常有版权栏、客服入口等固定区域，若只靠 margin-bottom，在小屏或缩放下容易重叠。
- 在
<body>或主内容容器末尾，显式插入一个占位<div class="footer-placeholder"></div> - 其高度必须等于悬浮条的
height（含 padding/border），用 CSS 变量统一管理，例如：:root { --buybar-height: 60px; }<br>.footer-placeholder { height: var(--buybar-height); } - 悬浮条自身设
height: var(--buybar-height)，保持同步 - 不要用 JS 动态计算高度，否则 SSR 或首屏渲染时可能闪动
悬浮条内按钮点击后跳转购物车，但用户想继续浏览商品怎么办？
硬跳转 /cart 会打断购物流程，尤其用户只是想看价格/库存，还没决定买。更合理的做法是“轻交互”。
- 主按钮文字别写“去购物车”，改用“加入购物车”或“立即购买”
- 点击后执行
fetch提交商品 ID 到后端，成功则局部更新按钮状态（如变“已加入”+ 微动效） - 同时右上角购物车图标数字 +1，用
aria-live="polite"保证读屏器可感知 - 保留“查看购物车”作为二级操作（小字链接或图标按钮），不自动跳转
- 若必须跳转，用
history.pushState()替代window.location.href，避免整页刷新丢失滚动位置
移动端键盘弹出时悬浮条被顶起或消失，怎么稳住？
iOS 和部分安卓 WebView 中，输入框聚焦唤起软键盘会压缩视口高度，fixed 元素常被错误重定位甚至不可见。
立即学习“前端免费学习笔记（深入）”；
- 绝对不要给悬浮条设
transform或will-change，这会让某些 WebView 失去定位锚点 - 避免使用
vh设置高度或内边距（如height: 100vh），改用px或rem - 监听
focusin事件，在输入框聚焦时临时给body加class="keyboard-active"，CSS 中用.keyboard-active .buy-bar { transform: translateY(0); }强制重绘（部分机型需要） - 更稳妥的做法：检测
window.visualViewport高度变化，当visualViewport.height明显小于window.innerHeight时，临时将悬浮条position切为absolute并bottom设为0，键盘收起后再切回fixed
悬浮条看着简单，但真要兼顾各种设备、输入状态和用户意图，核心其实是「不抢焦点、不破坏上下文、不依赖视口稳定」。多数失败案例，都栽在用 sticky 代替 fixed，或者用 JS 算高度却没处理 SSR 场景。
