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

它将模拟它被修复的效果。

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

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

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

1 个答案: