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

到目前为止，我唯一能做到的就是将位置切换到＆＃34;固定＆＃34;每个div取决于window.scrollTop。 div会滚动前一个但不会出现＆＃34;＃34; 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;
}

简单:-)只需用固定背景给你的div height。记住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

1 个答案: