淘宝活动页面全屏时导航栏的「防走失指南」

上周三晚上十点，我蹲在路由器旁边抢限量球鞋。正当倒计时归零准备开抢时，突然发现全屏的活动页把顶部导航栏吞得干干净净——想切回主会场比在超市找出口还难。这种「沉浸式迷路」体验，相信每个网购达人都经历过。

为什么导航栏会玩消失？

淘宝的技术小哥们其实用心良苦。当活动页开启全屏模式时，浏览器地址栏和底部工具栏会自动隐藏，这是为了让满屏的优惠信息更有冲击力。但副作用就是咱们熟悉的顶部导航栏也跟着被「误伤」，就像剧场关灯时不小心把安全出口的灯也掐了。

技术原理三要素

• 视口高度变化：移动端100vh包含浏览器UI区域
• 滚动同步难题：内容滚动时导航位置难以固定
• 设备适配差异：安卓和iOS的工具栏高度不同

让导航栏「站岗」的三大招

方案一：CSS粘性定位（推荐做法）

淘宝年货节主会场用的就是这个方案。把导航容器设置成position: sticky，再加个top: 0就像给导航栏装了磁铁：

性能优化小贴士

过度使用scroll事件监听会导致页面卡顿，就像穿着雪地靴跑步。建议改用Intersection Observer API，淘宝的「百亿补贴」页面更新后，FPS指标提升了23%（数据来源：《淘宝前端性能优化指南》）。

窗外的快递车又开始卸货了，屏幕前的你应该已经get到让导航栏「随叫随到」的秘诀。下次大促时，记得看看那些始终坚守岗位的导航栏——它们可能正用着你刚学会的代码技巧呢。