1

我正在尝试实现这样的效果，即当您滚动时，部分会相互滑动（类似于固定背景位置所获得的效果）。

我能够使用这个 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定位。如果您滚动到页面底部，它也会破坏链接锚点（即任何“卡住”的东西都无法通过锚点到达）。

欢迎改进或替代建议。

4

0 回答 0