javascript - 通过滚动显示另一个 div 后面的 div

Question

我目前正在开发一个 joomla 网站，其中有多个模块，例如:

<div class = "mod_slideshow"></div>
<div class = "blog-featured"></div>
<div class = "mod_example"></div>

我希望它们相互重叠，就像在这个网站中一样:http://www.lyonaeroports-t1.com/fr/la-qualite-de-service-au-coeur-du-projet

到目前为止，我唯一能做的就是根据 window.scrollTop 将每个 div 的位置切换为“固定”。 div 滚动到前一个，但并不像提到的网站那样“出现”。

我真的不知道该怎么做，非常欢迎任何帮助。

Answer 1

他们实现的这种效果称为“视差滚动效果”

您所展示的示例实际上非常简单 - 您神奇的 CSS 属性是 background-attachment:fixed。考虑下面的 HTML

Codepen

HTML

<div class="mod_slideshow"></div>
<div class="blog-featured"></div>
<div class="mod_example"></div>

适当的CSS代码应该是(不需要JS)

.mod_slideshow {
  background: url("http://www.w3schools.com/css/trolltunga.jpg");
  height: 500px;
  background-attachment: fixed;
}

.blog-featured {
  background: url("http://www.aee-community.com/wp-content/uploads/rtMedia/users/1/2016/09/2429637D00000578-0-image-a-284_1419003100839.jpg");
  height: 500px;
  background-attachment: fixed;
}

.mod_example {
  background: url("http://economictimes.indiatimes.com/thumb/msid-25252601,width-640,resizemode-4/stunning-images-of-the-space.jpg");
  height: 500px;
  background-attachment: fixed;
}

简单:-) 只需给固定背景的 div 指定一个高度即可。请记住，div 本身不是固定的，背景图像是固定的。

.mod_slideshow {
  background: url("http://www.w3schools.com/css/trolltunga.jpg");
  height: 500px;
  background-attachment: fixed;
}

.blog-featured {
  background: url("http://www.aee-community.com/wp-content/uploads/rtMedia/users/1/2016/09/2429637D00000578-0-image-a-284_1419003100839.jpg");
  height: 500px;
  background-attachment: fixed;
}

.mod_example {
  background: url("http://economictimes.indiatimes.com/thumb/msid-25252601,width-640,resizemode-4/stunning-images-of-the-space.jpg");
  height: 500px;
  background-attachment: fixed;
}

<div class="mod_slideshow"></div>
<div class="blog-featured"></div>
<div class="mod_example"></div>