在滚动时，当前div上升，并且其下的另一个div（在第一个div背景下）显示

本文介绍了在滚动时，当前div上升，并且其下的另一个div（在第一个div背景下）显示的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 我有无序列表包含两个列表项。每个列表项都包含填充页面高度的内容。因此，这意味着整个网页包含两个可滚动页面。 < ul id =main_ul> < li id =page1> < section id =before-after> < /节> < /锂> < li id =page2> < section id =video> < /节> < / li>< / ul> 我向下滚动第一个列表内容隐藏（上），第二个列表内容显示它是第一个列表的背景。 看看这个网站 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背景下）显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！