2

Help with Scroll/Follow Sidebar のスクロール/フォロー サイドバーに jquery 手法を使用

$(function() {
    var $sidebar   = $(".sidebar"),
        $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
            });
        }
    });
});

唯一の問題は、サイドバー (.sidebar) がフッター (.footer) に達すると、フッターの高さ近くまでフッターが押し下げられることです。
フッターの高さが 200px の場合、サイドバーはフッターを ~200px (Internet Explorer)、~50px (Firefox、Chrome、Opera) にプッシュしてから、フッターを表示します。
コンテンツとフッターの間の 200px の空白スペースが私の本当の問題です。
フッターの開始位置でサイドバーのスクロールを停止したい。

4

3 に答える 3

2

多分もっときれいなコード：

$(function() {
    var $sidebar   = $("#sidebar"), 
        $window    = $(window),
        offset     = $sidebar.offset(),
        topPadding = 15;

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

他の値を変更して、アニメーションの継続時間を変更できます400(0 に設定すると、サイドバーがアニメーションを「しない」ようになります)。

于 2013-12-03T15:38:03.803 に答える
0

質問が古すぎます。他の回答を読んだ後、自分の場合にこれを作成します。これが後で人々を助けることを願っています。

$(function() {
var $sidebar   = $("#sidebar"), 
$window    = $(window),
offset     = $sidebar.offset(),
topPadding = 15;
$window.scroll(function() {
if ($window.scrollTop() > offset.top) {
    if (($window.scrollTop())> ($("#following").offset().top + $("#following").height() - $sidebar.height())) {
        ;
    } else {
        $sidebar.stop().animate({
            marginTop: $window.scrollTop() - offset.top + topPadding
        }, 400);
    }

} else {
    $sidebar.stop().animate({
        marginTop: 0
    }, 400);
}
});
});

写真を見る

于 2015-05-12T00:41:25.550 に答える