Sticky Header
理解 sticky、层级、背景与滚动页面之间的关系。
CSS DEVELOPMENT LAB · 01
响应式 Header
与多级导航
一个贴近企业官网真实场景的导航实验：桌面端下拉菜单、Sticky Header、 手机端抽屉菜单、二级菜单展开，以及可靠的层级与滚动控制。
查看实验重点CORE TOPICS
本实验重点
Desktop Dropdown
用 CSS 完成桌面端下拉菜单的定位、显示与过渡。
Mobile Drawer
用 transform 构建右侧抽屉，JS 只负责状态切换。
Responsive System
桌面与手机端使用不同导航表达，但共享统一信息结构。
DEMO CONTENT
向下滚动，观察 Sticky Header
页面故意保留足够高度，方便测试 Header 吸顶、桌面下拉菜单、 手机抽屉菜单以及打开导航时的页面滚动锁定。
REUSABLE
适合直接拆到真实项目中
HTML、CSS、JavaScript 和 SVG 图标完全分离。后续修改菜单文字与链接时， 不需要改 CSS；如果页面没有二级菜单，也可以直接删除对应结构。
CSS FIRST
CSS 负责表现，JS 只负责状态
菜单滑入、箭头旋转、子菜单展开、遮罩与响应式均由 CSS 处理； JavaScript 只负责添加或移除状态类以及同步 ARIA 属性。
MAINTAINABLE
保持结构简单，方便长期维护
这不是完整网站主题，而是一个最小、独立、可复用的 CSS 实验。 后续 20 个实验也会尽量保持这一原则。
END OF LAB 01