在具有视差效果的多个部分上固定文本

Question

我有4个部分，所有的部分都有背景图片。 问题是每个部分的中间都有一些文字。 它们应该是固定的，即，当我们滚动时，第一部分下面的部分应该与它上面的部分以及上面的文本重叠。

我使用了ext固定的位置，但是只有第一部分的文字可见。

HTML

<div class="site-body">
            <section id="section1">
                <div class="section-text1">
                    Section 1
                </div>
            </section>
            <section id="section2">
                <div class="section-text2">
                    Section 2
                </div>
            </section>
            <section id="section3">
                <div class="section-text3">
                    Section 3
                </div>
            </section>
            <section id="section4">
                <div class="section-text4">
                    Section 4
                </div>
            </section>
        </div>

CSS

.page-wrapper .site-body #section1 {
position: relative;
width: 1024px;
height: 100%;
background-color: red;
background: url(../images/section1.jpg) no-repeat fixed;
background-position: center center;
z-index: 2000;
}
.page-wrapper .site-body #section1 .section-text1 {
position: fixed;
width: 300px;
margin: 0 auto;
padding-top: 100px;
background: #000000;
}
.page-wrapper .site-body #section2 {
position: relative;
width: 1024px;
height: 100%;
background-color: green;
background: url(../images/section2.jpg) no-repeat fixed;
background-position: center center;
z-index: 3000;
}
.page-wrapper .site-body #section2 .section-text2 {
position: fixed;
width: 300px;
margin: 0 auto;
padding-top: 100px;
background: #000000;
}
.page-wrapper .site-body #section3 {
position: relative;
width: 1024px;
height: 100%;
background-color: #ffff00;
background: url(../images/section3.jpg) no-repeat fixed;
background-position: center center;
z-index: 4000;
}
.page-wrapper .site-body #section3 .section-text3 {
position: fixed;
width: 300px;
margin: 0 auto;
padding-top: 100px;
background: #000000;
}
.page-wrapper .site-body #section4 {
position: relative;
width: 1024px;
height: 100%;
background-color: darkblue;
background: url(../images/section4.jpg) no-repeat fixed;
background-position: center center;
z-index: 5000;
}
.page-wrapper .site-body #section4 .section-text4 {
position: fixed;
width: 300px;
margin: 0 auto;
padding-top: 100px;
background: #000000;
}

Answer 1

简单的答案是您不能这样做。

当您将某个元素设为position:fixed ，它不再会被其父对象的overflow:hidden所限制。

但是，您可以通过不固定内容并将内容偏移相同数量的scrollTop来伪造它。

它将模拟其修复的效果。

这是一个DEMO-它确实需要jQuery

（没有我能想到的纯CSS解决方案。）