網絡視差滾動背景圖像和文本

搗鼓這個問題的：http://jsfiddle.net/Vy365/3/網絡視差滾動背景圖像和文本

我想有視差滾動效果在頁面上創建的部分。

我使用的主要CSS是用於背景圖像的background-attachment: fixed，以及用於圖像頂部的文本的position: fixed。

我有多個div在頁面上有這種效果，我希望每個部分都能掩蓋它之前的內容。

HTML：

<section> 
    <div id="parallax-1" class="parallax"> 
     <div class="title"> 
      <h1>Fixed Text 1</h1> 
     </div> 
    </div> 
</section> 

<section class="scrolling-content">Scrolling Content</section> 

<section> 
    <div id="parallax-2" class="parallax"> 
     <div class="title"> 
      <h1>Second Fixed Text</h1> 
     </div> 
    </div> 
</section> 

<section class="scrolling-content">Scrolling Content</section>

CSS：

.parallax { 
    margin: 0 auto; 
    padding: 0; 
    position: relative; 
    width: 100%; 
    max-width: 1920px; 
    height: 200px; 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    background-position: 50% 0; 
    z-index: 1; 
} 

.parallax .title { 
    position: fixed; 
    top: 80px; 
} 

#parallax-1 { 
    background-image: url(http://placekitten.com/500/200); 
} 

#parallax-2 { 
    background-image: url(http://placekitten.com/500/202); 
} 

.scrolling-content { 
    position: relative; 
    width: 100%; 
    height: 200px; 
    background: #ffffff; 
    z-index: 2; 
}

的背景圖像掩蓋彼此適當的，但固定文本保持固定的頁面（上再次看到了fiddle）。

有沒有什麼辦法可以解決這個問題？或者我必須做一些糟糕的jQuery窗口滾動監視？

來源

2013-07-23 dougmacklin