1

jqueryテクニックを使用して、css-tricks.comからスクロール/フォローサイドバーを作成しました。imが何について話しているのかわからない場合のコードは次のとおりです。

$(function() {

        var $sidebar   = $("#scroll-menu"),
            $window    = $(window),
            offset     = $sidebar.offset(),
            topPadding = 15;

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

    });

こちらもリンクhttp://css-tricks.com/scrollfollow-sidebar/です

私がこれに関して持っている唯一の問題は、それがコンテナを持っているということですが、フッターに十分にスクロールすると、サイドバーがコンテナからスクロールアウトします。下にスクロールする距離を制限する方法はありますか？

これが起こっていることの画像です：http： //tinypic.com/r/2mcj2mv/7

前もって感謝します

4

1 に答える 1

9

$(window).scrollTop()が特定のしきい値より大きい場合は何もしない条件文を追加する必要があります。問題は、さまざまな高さのページで機能させたいと思うので、そのしきい値を設定することにあります。幸い、フッターのオフセットとサイドバーの高さを使用して、このしきい値を決定できます。以下は、特定の状況に合わせて微調整が必​​要な場合がありますが、基本的には次のとおりです。

$(function() {

    var $sidebar   = $("#scroll-menu"),
        $window    = $(window),
        $footer    = $("#footer"), // use your footer ID here
        offset     = $sidebar.offset(),
        foffset    = $footer.offset(),
        threshold  = foffset.top - $sidebar.height(); // may need to tweak
        topPadding = 15;

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

});
于 2011-01-17T20:13:47.937 に答える