固定文本在多個部分上有視差效果

我有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; 
}

來源

2014-12-23 Stacy J

簡單的答案是，你不能這樣做。

當您製作一個元素position:fixed時，它不再會被其父母的overflow:hidden剪裁。

但是，您可以通過不固定內容並通過用相同數量的scrollTop偏移內容來僞造它。

它將模擬它被修復的效果。

Here's a DEMO - 它確實需要jQuery的

（沒有，我能想到的純CSS的解決方案。）

來源

2014-12-23 23:26:24 Miro

這個解決方案似乎在搗鼓做工精細，但在瀏覽器它具有不必要的填充頂部和兩側。當我給內容填充時，所有文本都互相重疊 –

我能夠使其工作。非常感謝......這是一個圖像問題。 –

IE 8顯示了一些問題......這不適用於IE 8 ..它是一種修復 –

固定文本在多個部分上有視差效果

回答

相關問題