�完美实现:滚动时两者同时固定并上下排列
向下滚动试试 — 通知横幅会固定在页面最顶部,导航栏紧贴其下方,两者始终可见且互不重叠。
关闭通知横幅后,导航栏自动上移到最顶部固定,依旧保持最佳体验。
✨ 技术原理
滚动超过阈值后,同时给通知横幅和导航栏添加 .fixed 类。横幅 top=0,导航栏的 top 动态设为横幅的实际高度(例如 52px)。两者 z-index 配合,始终保持上下关系。
占位符保证原位置不塌陷,关闭按钮触发重新计算高度并调整导航栏位置。
�滚动测试区域(制造滚动空间)
继续向下滚动,观察顶部两个元素是否如您所愿:通知横幅在上一层,导航栏在其正下方。
不会再出现导航栏被横幅遮住,也不会横幅消失不见。
更多内容区块
—————————— 足够的高度让滚动生效 ——————————
满足领导要求:下拉时通知横幅和导航栏一直置顶显示且上下排列,互不冲突。
关闭横幅后依然美观,自适应布局。
