sticky定位的问题？

Question

大佬们，本人想实现苹果官网的使用裁剪的方式实现颜色切换，切换到最后一张时取消sticky定位，继续浏览网站的内容。但我现在遇到了网站内容占位颜色切换的情况，请问怎么解决呢？

• 源码地址：网站切换问题
• 以下是问题截图：
  

Answer 1

如果只做一个比简单的修改，可以通过给 #box2 元素增加 background:white;z-index:2 和给 #box3 添加 z-index:1 来实现你期望的效果。

---

但你的问题并不是在样式上面，而是在设计上面。就是你使用了 position:sticky 想要让颜色切换的部分固定在当前视窗。但是你的容器 #box2 的高度是 100vh 的，所以稍微滚动一下就会展示下一屏的部分，但是你又想通过判断 滚动条位置（document.documentElement.scrollTop) 和 页面可滚动区域（document.documentElement.scrollHeight） 来处理是否让颜色容器开启 no-sticky 的样式。所以你给 body 元素设置了 height:500vh 来假装页面可以滚动很多的距离，来达到你所“期望”的滚动效果。

所以需要考量一下是否应该这样设计。可以通过观察苹果官网的具体实现来复刻。也可以参考社区内已经有人分享过的文章来实现。