sticky定位的困扰
在实现类似于苹果官网的色块切换效果时，开发者可能遇到这样一个问题：当切换到最后一张颜色时取消sticky定位后，继续浏览网站内容时发生内容占位的情况。
问题重现
以下是实现过程中遇到的问题：
源码地址：网站切换问题问题截图：
[问题截图]
解决方案
简单的解决方法：
为#box2元素添加background:white;z-index:2给#box3添加z-index:1
进阶思考：
除了样式上的修改，需要注意的是这种设计本身存在缺陷：#box2的高度为100vh，稍作滚动便会显示下一屏幕的部分。为了处理sticky定位的开启和关闭，开发者设置了body元素的高度为500vh，试图模拟页面可以滚动大量距离的假象。
因此，需要考虑是否需要采用这种设计方案。可以参考苹果官网的实现或者社区内共享的文章来获得更多启发。
以上就是Sticky 定位使用中遇到的占位问题：如何避免苹果官网色块切换效果的BUG？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1558691.html
微信扫一扫 
支付宝扫一扫 
