在滚动时，当前div上升，并且其下的另一个div（在第一个div背景下）显示 [英] While scrolling, The current div goes up, and another div under it (under the first div background) shows

问题描述

我有无序列表包含两个列表项。每个列表项都包含填充页面高度的内容。因此，这意味着整个网页包含两个可滚动页面。

 < ul id =main_ul> < li id =page1> < section id =before-after> < /节> < /锂> < li id =page2> < section id =video> < /节> < / li>< / ul>  

我向下滚动第一个列表内容隐藏（上），第二个列表内容显示它是第一个列表的背景。

看看这个网站< a href =http://www.hadana.comuf.com/ =nofollow> http://www.hadana.comuf.com/
开始滚动图片后如何在css或jquery中做到这一点？

解决方案

使用html和css，z-indexing，透明div和固定位置div的组合。 在全视图中运行下面的代码片段，有点匆忙，但你应该明白了。

html，body {height：100％;背景：蓝色;位置：相对;保证金：0; padding：0;}。section {position：relative;宽度：100％;身高：100％; z-index：200;}。section-one {background：RED;}。section-two {padding-top：200px; } .section-two h1 {margin：0; text-align：center;}。section-three {background：GRAY;}。fixed-section {position：fixed;顶部：50％; transform：translateY（-50％）;左：0;宽度：100％; height：200px; z-index：100; text-align：center;}

< div class = section-one section>< / div>< div class =section-two section> < h1>< / div>< div class =section-three section>< / div>< div class =fixed-section> < img src =http://placehold.it/350x150>< / div>

I have unordered list contains two list items. Every list item has content that fill a page height. So this means that the whole web page contains two scrollable pages.

<ul id="main_ul">
    <li id="page1">													
		<section id="before-after">
        </section>
    </li>
    <li id="page2">
        <section id="video">
        </section>
    </li>
</ul>

I want when I scroll down the first list content hides(goes) up and the second list content shows like it was the background of the first list.

Take a look at this website http://www.hadana.comuf.com/ after I start scrolling the image goes up and the div under it shows.

How to do that in css or jquery ?

解决方案

with html and css, a combination of z-indexing, transparent divs, and fixed position div.

run the code snippet below in full view, a bit rushed but you should get the idea.

html,
body {
  height: 100%;
  background: BLUE;
  position: relative;
  margin: 0;
  padding: 0;
}
.section {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 200;
}
.section-one {
  background: RED;
}

.section-two{
  padding-top:200px;  
}
.section-two h1 {
  margin: 0;
  text-align: center;
}
.section-three {
  background: GRAY;
}
.fixed-section {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 100%;
  height: 200px;
  z-index: 100;
  text-align: center;
}

<div class="section-one section">

</div>
<div class="section-two section">
  <h1>THIS IS A TEXT</h1>
</div>
<div class="section-three section">

</div>
<div class="fixed-section">
  <img src="http://placehold.it/350x150">
</div>

这篇关于在滚动时，当前div上升，并且其下的另一个div（在第一个div背景下）显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！