粘性/固定/滑动滚动的Javascript

Question

我正在尝试实现那种效果，当你滚动时，各个部分会相互滑动（具有固定背景位置的部分）。

我能够使用这个jQuery库（Sticky-Kit）http://leafo.net/sticky-kit/作为起点。

我在这里有一个演示：http://jsfiddle.net/Ntz2V/

<div id="wrapper">
    <section id="A">...
    </section>
    <section id="B">...
    </section>
    <section id="C">...
    </section>
    <section id="D">...
    </section>
</div>

javascript与z-index修复一起使用，因此以下部分将滑过上一部分：

$(document).ready(function() {
    $("#A").stick_in_parent().css('z-index', -1);
    $("#B").stick_in_parent().css('z-index', -1);
    $("#C").stick_in_parent().css('z-index', -1);
    $("#D").stick_in_parent().css('z-index', -1);
});

然而，它有一些问题，我想知道是否有另一种方法可以做到这一点。

首先，Stick-Kit使用隐藏的div叠加层，以便在滚动时前一个链接无法点击。我发现没有z-index技巧来避免这种情况，因为“卡住”部分有position: fixed但隐藏的div不能是fixed位置。如果您已滚动到页面底部，它也会中断链接锚点（即，无法通过锚点到达任何“卡住”的内容）。

欢迎改进或其他建议。