position: sticky比fixed更适合移动端顶部通知横幅，因其未滚动时占位、滚动后吸顶，避免遮挡正文和高度同步问题；在ios safari等环境中更稳定，不随软键盘或地址栏变化跳动。
用 position: sticky，而不是 position: fixed —— 这是移动端顶部通知横幅最干净、最可靠的做法。
为什么 sticky 比 fixed 更适合移动端横幅
fixed 会脱离文档流，导致正文被遮、需手动加 padding-top、横幅高度变化时容易错位；而 sticky 在未滚动时占位、滚动后才“吸顶”，天然规避了遮挡和高度同步问题。尤其在 iOS Safari 和 Android WebView 中，sticky 对 touch scroll 的响应更稳定，不会像 fixed 那样在软键盘弹出或地址栏收起时跳动或偏移。
- 必须把横幅放在一个有明确 height 或 min-height 的父容器内（比如
<header></header>或直接作为的第一个子元素），否则 sticky 不生效 - 要写
top: 0，不能只写sticky—— 缺少阈值，浏览器不触发吸顶行为 - 避免在父元素上设
transform、perspective或overflow: hidden，这些会创建新的层叠上下文，使 sticky 失效
关闭状态如何持久化且不干扰滚动体验
用户点 × 后横幅消失，但刷新页面又出现，说明状态没存住；而用 localStorage 存了却在 Safari 无痕模式报错，则是没加容错。关键不是“存”，而是“何时读、何时删、何时重绘”。
- 页面加载时立即检查：
if (localStorage.getItem('banner_closed') === 'true')，然后给横幅加style.display = 'none'或移除 class - 关闭按钮点击后，执行
localStorage.setItem('banner_closed', 'true')，再调用element.remove()（比display: none更彻底，释放无障碍焦点） - 务必包
try { ... } catch (e) { }—— Safari 无痕模式下localStorage直接抛QuotaExceededError - 别监听
beforeunload去清理状态：用户关 tab 前未必点 ×，反而造成误判
小屏下文字截断、按钮挤压、间距错乱怎么防
Flex 默认压缩子项，iOS Safari 对 flex: 1 支持差，老版本 Android WebView 甚至忽略 min-width: 0 —— 这些都会让横幅在窄屏上文字溢出、× 按钮缩成一条线。
- 文字容器加
flex: 1; min-width: 0;+white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - 关闭按钮加
flex-shrink: 0;，确保不被压扁 - 横向间距不用
gap（Safari 14.1 以下不支持），改用margin-left: auto推右，或显式margin-left: 8px - 媒体查询中同步缩小
font-size和padding，例如@media (max-width: 480px) { .banner { padding: 8px 12px; font-size: 14px; } }
真正卡住人的从来不是“怎么让它贴顶”，而是横幅关闭后焦点落在哪、屏幕阅读器是否还感知它、Safari 无痕模式下 localStorage 写失败时有没有 fallback、以及横幅高度随字体加载变化引发的 layout shift —— 这些细节不处理，横幅就只是个会动的 div。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
