底部通知条需用position: fixed配合env(safe-area-inset-bottom)、z-index≥1000及padding-bottom适配安全区；关闭须remove()节点并存localStorage；插入前确保body存在；动画优先用transform避免闪烁；务必真机测试兼容性。
底部通知条不是靠 position: fixed 简单一贴就完事的——它得不遮挡操作区域、能手动关闭、不影响滚动体验，还得在 iOS Safari 里不被地址栏遮住。
用 position: fixed + bottom: 0 是基础，但必须加 z-index 和安全间距
直接写 bottom: 0 在部分安卓浏览器或微信内置 WebView 中会紧贴屏幕底边，导致被系统手势条或软键盘顶起；iOS 上则可能被 Safari 地址栏覆盖。解决办法是：
-
bottom: env(safe-area-inset-bottom)必须加上，兼容刘海屏和手势条 -
z-index至少设为1000，避免被弹窗、菜单等组件压住 - 外层容器加
padding-bottom: env(safe-area-inset-bottom)（如果通知条是常驻非浮层）
示例 CSS：
.notification-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 1000;
padding-bottom: env(safe-area-inset-bottom);
}
关闭按钮要绑定 click 且清除 DOM，别只用 display: none
很多实现只切 display 或 visibility，结果用户再刷新页面，通知还在；或者监听不到后续触发逻辑。正确做法是：
立即学习“前端免费学习笔记（深入）”；
- 点击关闭后，调用
remove()真实移除节点，而非隐藏 - 用
localStorage记录已关闭状态，比如键名dismissed-notification-v2，下次加载前先检查 - 按钮本身用
<button type="button">，避免触发表单提交
简短 JS 示例：
const bar = document.querySelector('.notification-bar');
const closeBtn = bar?.querySelector('[data-dismiss]');
if (closeBtn) {
closeBtn.addEventListener('click', () => {
bar.remove();
localStorage.setItem('dismissed-notification-v2', '1');
});
}
从 JS 插入通知条时，要判断 document.body 是否已就绪
把通知条代码扔在 <head> 里或过早执行，document.body 还没生成，appendChild 就会报错 Cannot read property 'appendChild' of null。稳妥做法：
- 不在
<head>内执行插入逻辑 - 用
document.readyState === 'loading'判断，或监听DOMContentLoaded - 更简单：把脚本放
</body>前，确保body存在
不推荐写成：
document.body.appendChild(bar); // 可能报错
推荐兜底写法：
function injectBar() {
if (document.body) {
document.body.appendChild(bar);
} else {
setTimeout(injectBar, 50);
}
}
移动端真机测试时，transform: translateY 动画比 opacity 更可靠
单纯用 opacity 淡入，在旧版 iOS Safari 中可能出现闪烁或渲染异常；而 transform 触发硬件加速，动画更稳。关键点：
- 入场动画用
transform: translateY(100%)→transform: translateY(0) - 配合
transition: transform 0.3s ease-out，别加opacity过渡 - 动画结束后，确保最终样式中
transform为none，否则可能影响点击热区
注意：不要对 fixed 元素同时做 transform 和 bottom 动画，iOS 会丢帧。
最常被忽略的是 env(safe-area-inset-bottom) 的 fallback——当浏览器不支持时，它值为 0，会导致通知条被遮挡。上线前务必在 iOS 14+、Android Chrome、微信 8.0.32 环境下实测真机表现。
