演示

该滚动效果特点是使用固定背景与色块内容交替，当访客向下滚动时，背景是fixed固定的，具体请查看：

 

从上图可以看出，内容向上滚动时，第一张背景是固定的，不会跟着向上滚动。即：固定背景 + 色块内容 + 固定背景 + 色块内容…这样的交替方式，从而产生视差效果。

兼容性

• IE9+
• Firefox
• Chrome
• Safari
• Opera

使用教程 
 
HTML代码 

HTML代码结构很清晰，使用main标签包住所有内容，其中.cd-fixed-bg样式就是固定背景，.cd-scroll-bg样式为色块内容。

CSS样式

主要是通过css的background-attachment:fixed定位属性来让背景固定，具体请看下面的样式代码：

好了，就此介绍完这个固定背景滚动效果，喜欢的可以动手试一试，或许在你的下一个网页设计项目上尝试使用。