javascript - ブラウザの高さに応じてdivをアニメーション化する

Question

ユーザーがウェブページの特定の高さ（600pxなど）にスクロールしたときに、DOMの特定のdivをアニメーション化したいと思います。

問題は、私がグーグルを調べているのですが、それについて何も見つかりません。それはすべて緩和に関することです。

誰かがこれを手伝ってくれますか？私はjQueryとJavascriptのドキュメントを見ていますが、それでもサイコロはありません。

Answer 1

これを試して：

var timer;

$(document).scroll(function() {
    clearTimeout(timer);
    timer = setTimeout(function() {
        if ($(document).scrollTop() > 600) {
            $("#myDiv").animate({ height: "100px" });
            $("#myOtherDiv").animate({ width: "225px" });
        }

        if ($(document).scrollTop() > 700) {
            $("#anotherDiv").animate({ height: "300px" });
        }
    }, 100);
});

ここでのタイマーは重要であることに注意してください。そうしないと、文字通り何千ものscrollイベントが不必要に処理される可能性があります。タイマーは、スクロールが終了すると関数が実行されることを保証します。

Answer 2

scrollイベント（jQuery API --scroll（）を参照）を使用してスクロールを検出し、 （ jQUery API --scrollTop（）scrollTop()を参照）の値を使用して、ユーザーがスクロールしてさらにアクションをトリガーした距離を確認できます。