javascript - 具有视差效果的多个部分的固定文本

Question

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

我为分机使用了固定位置，但只有第一部分文本可见。

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 来伪造它。

它将模拟它被固定的效果。

Here's a DEMO - 它确实需要 jQuery

(我想不出纯 CSS 解决方案。)