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>

z-index 修正で Javascript が使用されているため、以下のセクションは前のセクションの上にスライドします。

$(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);
});

しかし、それにはいくつかの問題があり、これを行う別の方法があるかどうか疑問に思っています。

1 つには、Stick-Kit は非表示の div オーバーレイを使用しているため、スクロールすると以前のリンクをクリックできなくなります。「スタック」セクションにはposition: fixedあるが、非表示の div を配置できないため、これを回避するための z-index トリックは見つかりませんでしfixedた。また、ページの一番下までスクロールすると、リンク アンカーが壊れます (つまり、「スタック」しているものはアンカーで到達できません)。

改善または代替提案を歓迎します。

4

0 に答える 0