Question

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

＆＃13;

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

＆＃13;

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

看一下这个网站http://www.hadana.comuf.com/ 在我开始滚动后，图像上升并显示其下方的div。

如何在css或jquery中执行此操作？

Answer 1

这是我的想法......

CSS：

#main_ul {
    padding: 0;
    margin: 0;
}
#main_ul li {
    min-height: 100px;
    list-style: none;
    position: relative;
}
#main_ul li .content {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}

HTML：

<ul id="main_ul">
    <li id="page1">                                                 
        <div class="content">
            <section></section>
        </div>
    </li>
    <li id="page2">                             
        <div class="content">
            <section></section>
        </div>
    </li>
    <li id="page3">                             
        <div class="content">
            <section></section>
        </div>
    </li>
</ul>

jQuery的：

var main_ul = $('#main_ul');
var li_elements = main_ul.find("li");
var window_height = $(window).height();

var i = 1000;
$.each(li_elements,function() {
    $(this).height(window_height);
    $(this).find(".content").height(window_height).css("z-index",i--).css("position","fixed");
});

$(window).scroll(function() {
    var scroll_offset = $(window).scrollTop();
    $.each(li_elements, function() {
        var el = $(this);
        if(el.offset().top < scroll_offset) {
            el.find(".content").css("position","absolute");
        } else {
            el.find(".content").css("position","fixed");
        }
    });
});

Answer 2

使用html和css，z-indexing，透明div和固定位置div的组合。

在完整视图中运行下面的代码片段，有点匆忙，但你应该明白这一点。

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背景下）显示

2 个答案: