通过滚动显示另一个后面的 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 的位置切换到 "fixed"。 div 滚动到前一个，但不像提到的网站那样 "appear" juste。

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

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;
}

简单 :-) 只需给 height 一个固定背景的 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>

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

Revealing a div behind another with scrolling

javascript

html

css

joomla

parallax