0

メニューをスクロールしたときに画面に沿ってスムーズにアニメーション化するための次のスクリプトを見つけました。

ただし、フッターが押し下げられているため、ページの高さが拡大し、それ以上のコンテンツはありません。フッターと衝突したときにスクロールを停止するにはどうすればよいですか？

コードは次のとおりです。

$(function() {

    var $sidebar   = $("#indhold_right"), 
        $window    = $(window),
        offset     = $sidebar.offset(),
        topPadding = 0;

    $window.scroll(function() {
        if ($window.scrollTop() > offset.top) {
            $sidebar.stop().animate({
                marginTop: $window.scrollTop() - offset.top + topPadding
            }, "fast");
        } else {
            $sidebar.stop().animate({
                marginTop: 0
            });
        }
    });

});
4

1 に答える 1

1

一歩下がって、なぜそれが起こっているのかを見てみましょう。スクロールする$window.scrollTop()とoffset.top、両方が変化します。ただし、前者は常に後者よりも大きくなります。したがって、スクロールするたびに、if条件がtrueと評価され、その上でanimate関数が呼び出されます。止まらない。

どうやってやめますか？それを超えるとアニメートしないストップチェックを置くことによって。ページが読み込ま$("#footer").offset().topれると、開始時のフッターの高さを取得します。したがって、チェックは$window.scrollTop()フッタートップよりも小さいはずです。

そのチェックは機能しますか？はい。ただし、サイドバーには高さがあり、サイドバーの上部がフッターの高さに達した後にのみ停止が機能するため（そのようにしたくない場合）、快適ではありません（停止）。したがって、ストップにサイドバーの高さを追加するだけです。これは100％正確ではなく、パディングやマージンなど、このストップでは考慮されていないものがありますが、見た目はかなり良く、そこから続行できると思います。

コードの答えを出す前に、http：//sscce.org/（@Zetaで言及されている）を見てください。常にこれに従ってください。時間と気分が良かったです。そうでなければ私はそれを見さえしなかっただろう。

以下はコードです。実例-http://jsfiddle.net/H3Dqr/ 

$(function() {

    var $sidebar = $("#indhold_right"),
        $window = $(window),
        offset = $sidebar.offset(),
        topPadding = 0,
        stop = $("#footer").offset().top;

    $window.scroll(function() {
        if ($window.scrollTop() > offset.top) {
            if ($window.scrollTop() + $sidebar.height() < stop) {
                $sidebar.stop().animate({
                    marginTop: $window.scrollTop() - offset.top + topPadding
                }, "fast");
            }
        } else {
            $sidebar.stop().animate({
                marginTop: 0
            });
        }
    });

});​
于 2012-07-20T02:58:11.753 に答える