1

私は一連の要素を持っています。これらの各要素の上部にはコンテンツがありますが、下部には水平バーが配置されるスペースがあります。

ページには 1 つの水平バーしかありません。最初の要素がスクロールして表示されなくなるまで、最初の要素の下部に「固定」する必要があります。その時点で、現在表示されている要素の下部にアニメーション化する必要があります。

現在アクティブなセクションを強調表示するためのロジックを示すフィドルをモックアップしましたが、これには満足しています。デフォルトでは、セクションは灰色です。上下にスクロールすると、最も表示されているセクションが赤に変わり、アクティブなセクションであることを示します。これは正常に機能します。水平バーは青色です。

私が苦労しているのは、スクロール時に変化するときに青いバーを赤いセクションの一番下までアニメーション化することです。

http://jsfiddle.net/9kW5N/2/

フィドルのコードが機能しない主な理由は、ウィンドウ スクロール イベントが「ライブ」ではないため、現在アクティブな (赤) セクションが何であるかがわからないためです。

誰でもこれを達成する方法を提案できますか?

ご指摘ありがとうございます。

4

1 に答える 1

1

changeSection()だから私はあなたの関数のいくつかのコードを変更しました。ある程度は機能しますが、完全ではありません。多分それはあなたを正しい方向に向けるでしょうか？

アニメーション onScroll もコメントアウトしました。

function changeSection() {
    $('.active').removeClass('active');
    var currentlyActive = $('section').eq(closestArrPos);
    currentlyActive.addClass('active');
    $("#horiz").animate({"top" : currentlyActive[0].offsetTop + currentlyActive.height()}, "fast");
}

デモ: http://jsfiddle.net/9kW5N/5/

また、window.scroll イベントを setTimeOut 関数に配置して、スクロールが完了した後にのみ効果的に呼び出されるようにする必要がありました。

于 2012-07-05T21:18:23.910 に答える