我发现好的网站都用了如下GIF的模块与背景图片切换的效果，这让在下心痒痒的，所以自己动手写了一遍发现蛮简单的，分享给大家！
思路说明:
首先我的思路是介个样子的：先让一个空的宽度高度都占满的div孩子悬浮最底层，里面设置宽度高度-都占满背景图片，这样底部的图片就搞定了；然后再设置竖直排列宽度高度都占满的div模块，模块的排布为：实体模块=》透明模块=》实体模块=》透明模块=》实体模块，这样的话向下滑动滚动条就可以把图片露出来了；最后在根据当前位置距离顶部的距离来动态修改背景图片就好了。js监听滚动写法：
html的注释写得比较详细就不多说了，css中我把模块的高度都设置成100vh了，也就是整个视图的高度，但是当浏览器放大或缩小时会出现图片切换时机偏差，要再次刷新浏览器才会正常，所以我推荐还是给个实高好一点，把.top.middle.bottom的高度设置在1000px以上效果好。
代码：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title></head><style>body {margin: 0;text-align: center;font-size: 100px;color: white;line-height: 100vh;}.main-div {width: 100%;height: 100vh;background-image: url(./images/1.jpg);background-repeat: no-repeat;background-size: 100% 100%;position: fixed;z-index: -1;}.transparent-module {width: 100%;height: 100vh;}.top {width: 100%;height: 100vh;background: #f00;}.middle {width: 100%;height: 100vh;background: #0f0;}.bottom {width: 100%;height: 100vh;background: #00f;}</style><body><header></header><main><!-- 悬浮最底层的背景 --><div class="main-div" id="main-div"></div><!-- 红色top模块 --><div class="top">top</div><!-- 透明且高度100%模块 --><div class="transparent-module"></div><!-- 绿色middle模块 --><div class="middle" id="middle">middle</div><!-- 透明且高度100%模块 --><div class="transparent-module" id="tm"></div><!-- 蓝色bottom模块 --><div class="bottom">bottom</div></main><footer></footer></body><script>window.onload = () => {// console.log('welcome')var mainDiv = document.getElementById('main-div');var middle = document.getElementById('middle');var tm = document.getElementById('tm');// console.log(middle.offsetTop);// console.log(middle.getBoundingClientRect().top);// 获取绿色middle模块离页面顶部的距离var middleTop = middle.offsetTop || middle.getBoundingClientRect().top;// 获取第二个透明且高度100%模块离页面顶部的距离var tmTop = tm.offsetTop;// 实时监听当前页面离页面顶部的距离window.addEventListener("scroll", function(event) {// 当前页面离页面顶部的距离var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;// console.log(scrollTop)// 判断切换背景图片if (scrollTop < middleTop) {mainDiv.style.backgroundImage = "url(./images/1.jpg)"} else if (scrollTop > middleTop) {mainDiv.style.backgroundImage = "url(./images/2.jpg)"}});}</script></html>
css背景悬浮写法：
另外我还发现了一种不需要操作js的写法，就是利用background-attachment: fixed;来实现，设置fixed后，背景就不会随之页面的滚动而滚动了。不过固定背景导致重绘的成本很高，所以在一些移动端是被禁止的，只需要在电脑端展示的话还是很不错的。
效果：
代码：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><style>body {margin: 0;}section {height: 100vh;}.block1 {background: url(./images/1.jpg) center;background-size: cover;background-attachment: fixed;}.block2 {background: url(./images/2.jpg) center;background-size: cover;background-attachment: fixed;}.transparency {height: 60vh;}.card {display: flex;justify-content: center;align-items: center;height: 20vh;font-size: 100px;color: #fff;background-color: #1E1E1E;}</style><body><main><section class="block1"><div class="card"><p>1</p></div><div class="transparency"></div><div class="card"><p>2</p></div></section><section class="block2"><div class="card"><p>3</p></div><div class="transparency"></div><div class="card"><p>4</p></div></section></main></body></html>
