用 position: sticky 可纯 css 实现轻量置顶公告栏，需置于 body 最上方、设 top: 0 和 z-index，配合 localstorage 控制关闭状态，并注意无障碍结构与移动端兼容性。
用 position: sticky 实现轻量置顶公告栏
不需要 JS，纯 CSS 就能实现固定在页面顶部、随滚动自动吸附的公告栏。关键不是 fixed，而是 sticky——它只在父容器可视范围内生效，不会遮挡导航栏或影响打印样式。
常见错误是直接套用 position: fixed，结果公告盖住 header、打印时始终显示、移动端适配错乱。
- 把公告 HTML 放在
最上方（紧贴<header></header>前），确保文档流顺序正确 - 给公告容器设
position: sticky; top: 0;，并添加z-index: 1000;避免被其他元素覆盖 - 必须设置明确的
background-color和padding，否则透明背景+无内边距会导致文字贴边难读 - 加
box-shadow: 0 2px 4px rgba(0,0,0,.1);提升视觉层次，避免和 header 边界混淆
公告内容可关闭？用 localStorage 记住用户选择
用户点“X”关闭后，下次打开页面不该再出现——这得靠 JS 配合 localStorage 控制显隐，而不是删 DOM 或设 display: none 再也不恢复。
容易踩的坑：直接监听点击就删节点，导致刷新后又出来；或者用 sessionStorage，关掉标签页就失效，体验断层。
- 给关闭按钮绑定事件，执行
localStorage.setItem('noticeClosed', 'true') - 页面加载时检查
localStorage.getItem('noticeClosed') === 'true'，若为真则对公告容器加style="display: none;" - 关闭按钮的
click事件里，记得调用event.stopPropagation()，防止误触外层链接 - 别忘了给按钮加
aria-label="关闭公告"，满足基础可访问性
响应式断点要单独处理移动端高度
PC 上 top: 0 没问题，但 iOS Safari 的地址栏缩放、安卓 Chrome 的底部导航栏会动态改变视口高度，导致 sticky 元素“卡半截”或跳动。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
这不是 bug，是浏览器对 vh 单位和 sticky 行为的实现差异。不能只靠媒体查询设 top: 0 就完事。
- 在移动端用
@supports (position: sticky)包裹样式，排除不支持的老浏览器 - 给公告容器设
max-height: calc(100vh - 60px);（60px 是 header 高度估算值），防内容过长撑开布局 - 加
overflow-y: auto;和-webkit-overflow-scrolling: touch;，保证长公告在 iOS 上可平滑滚动 - 测试时真机打开，别只信 Chrome DevTools 的模拟器——Safari 的 sticky 表现常有延迟
HTML 结构示例：语义清晰、无障碍友好
结构松散或缺 role 属性，会导致屏幕阅读器跳过公告，或把关闭按钮读成普通链接。
<div id="top-notice" role="region" aria-label="网站公告">
<div class="notice-content">
? 本周系统维护时间为 5 月 20 日 02:00–04:00，请提前保存工作。
</div>
<button id="notice-close" aria-label="关闭此公告">×</button>
</div>
注意：role="region" 让屏幕阅读器识别为独立区域；aria-label 明确说明按钮作用；关闭按钮必须是 <button></button>，不是 <span></span> 或伪元素。
复杂点在于，sticky 元素的父容器不能有 overflow: hidden 或 transform，否则会创建新的定位上下文，让 top: 0 失效——这个限制很容易被忽略，查起来费时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
