jquery - 滚动时级联 div 的简洁方法

Question

我正在寻找一种在滚动时将 div 层叠在另一个之上的简洁方法。我找到了一种方法，但它一点也不干净，我只成功了第一个。

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。

Answer 1

我最终使用了 jquery sticky 插件。

<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() 出现了一些小问题，但这只是给我带来的不便——开发人员而非用户。