长截图出现重复导航栏怎么办

拼接出来的长图上，顶部导航出现了七八次，侧边的悬浮按钮排成一列——这不是截图工具坏了，是固定定位元素在跟你作对。

为什么会重复

网页里的吸顶导航、悬浮咨询按钮、返回顶部箭头，通常写成 position: fixed 或 position: sticky。它们的定位基准是视口，不是文档：页面滚到哪里，它们就跟到哪里。

长截图的原理是滚动 + 逐屏拍摄 + 拼接。每一屏拍下来，那个导航都稳稳地待在同一个位置，拼起来自然就是一串导航。

顺带一提，动画和轮播也有类似问题：每一屏拍到的是不同帧，拼起来会出现半截动画。

三种处理方式

1. 截图时临时隐藏（最省事）

PanoSnap 在截图过程中会自动找出固定定位的元素，暂时隐藏它们，同时暂停页面动画，截完再恢复。对使用者来说，这一步是透明的——点「整页截图」，等结果就行。

2. 手动改 CSS 再截

用别的工具时，可以打开开发者工具，选中那个导航，把 position: fixed 改成 static（或直接 display: none），截完再改回来。

注意 position: static 会让元素回到文档流，把下面的内容整体往下顶，页面布局会变；display: none 更干净，但如果是那种”滚过一屏才出现”的导航，隐藏它反而可能影响其它元素的定位。改之前先记住原值，改完刷新页面就恢复了。

3. 截完再裁

最保守：先截一张带重复导航的长图，再在编辑器里把每一处导航裁掉。适合只出现一两次、且不在关键内容上的情况。次数一多就不现实了——十几个导航挨个裁，还不如重截。

三种方式怎么选

方式	适合	代价
工具自动隐藏	绝大多数情况	需要工具支持
手动改 CSS	工具不支持、且只截一次	要会开发者工具，可能影响布局
截完再裁	重复很少、位置固定	只出现一两次才划算

还有这些”重复”

• 滚动动画：元素随滚动淡入、位移，每一屏都停在不同状态，拼接处会出现半截动画。截图时暂停动画可以避免。
• 懒加载占位：没加载出来的图片是灰块，截进去就是一片灰。先滚到底让图片加载完。
• 轮播图：每一屏拍到的是不同的幻灯片画面。
• 视频：正在播放的视频在每一屏都是不同的帧，通常只能截到第一帧或黑屏。

小结

重复导航不是”截图坏了”，是固定定位的正常表现。要么让工具在截图时把它藏起来（PanoSnap 默认这么做），要么手动藏，要么事后裁——按重复次数选，次数一多就别裁了。

想要一张干净的长图，正确的顺序是：先滚到底让内容加载完 → 再从头开始截 → 顺手检查首屏有没有漏掉吸顶栏。