乾淨的方式來滾動div divs當滾動

我正在尋找一種乾淨的方式來滾動時，一個在另一個div div。我找到了一種方法來做到這一點，但它只是乾淨的，我只成功了第一個。乾淨的方式來滾動div divs當滾動

This is what I have, observe how the "section 1" goes under the others when scrolling down. 我用來獲取是，正如我所說的，非常亂，感覺就像它是錯誤的方式做到這一點，但這裏是主要的概念代碼：

<div style="left:0;" id="section-1"class="section"> 
       <h2><a name="1">Section 1</a></h2> 
       <p>Blahaha 
       </p> 
      </div> 
      <div style="z-index:-2; height: 100%;"></div> 
      <div></div>

而且也是一個CSS的額外的小大塊：

#section-1{ 
    position:fixed; 
    z-index: -1; 
}

的<div></div>部分是根本不扔的代碼這部分我對頁面的其餘部分：

.section:nth-of-type(odd) { 
    background: #dddddd; 
}

如果有人對此有所瞭解，那就太好了。

我願意爲此使用jquery。

來源

2014-10-21 Slava Knyazev

我如何解釋該示例而不檢查代碼，第1部分是z-index 1，內容z-index 2的其餘部分以及z-index 3的固定導航。此外，nav和Section 1的位置固定。如果將這些設置應用於文檔的通常流程，則應該得到非常相似的結果。請記住，您需要定位（即，絕對，相對或固定，但不是默認靜態），才能將z-index應用於元素。 – 2014-10-21 22:39:42

@ 2C-B是的，它是這樣的。我剛剛發現z-indexes存在，所以我的數字可能看起來很奇怪，但你有一般的想法。 – 2014-10-21 22:42:17

我結束了使用jQuery的粘性插件。

<script type='text/javascript' src='jquery.js'></script> 
     <script src="jquery.sticky.js"></script> 
<script> 
    $(document).ready(function(){ 
    $(".section").sticky({topSpacing:$('#navigation').height()}); 
    }); 
</script>

這引起了一些小問題nthchild()但這只是我不便 - 開發者，而不是用戶。

來源

2014-10-22 02:36:55

您可能想要使用pagePiling.js插件，該插件完全提供了級聯節的方式。

來源

2014-10-23 08:23:37 Alvaro

乾淨的方式來滾動div divs當滾動

回答

相關問題