0

ページを下にスクロールしてdivを取得しようとしています。それはかなりうまく機能しますが、スクロールしすぎるとdivがページの下部で動かなくなります:

$(function() {
    var $sidebar = $("#sidebar"),
        $bigPics = $("#bigPics"),
        $window = $(window),
        offset = $sidebar.offset(),
        topPadding = 20,
        turnoff = 1;
    var documentHeight = $(document).height();

    $window.scroll(function() {
        if (($window.scrollTop() > offset.top) && (documentHeight - 1200 > parseFloat($sidebar.css("marginTop")))) {
            $sidebar.stop().animate({
                marginTop: $window.scrollTop() - offset.top + topPadding
            });
        } else {
            $sidebar.stop();
        }
    });
});

ページを上にスクロールしたときに再び開始する方法についてのアイデアはありますか? 事前に乾杯

4

2 に答える 2

0

使用する：

$sidebar.css({'position':'absolute','top':0,'right':0});
var extraValue=0,sidebarHeight=$sidebar.height();
$window.scroll(function() {
    $sidebar.stop(true,true).animate({
       top: $window.scrollTop() + $window.height() - sidebarHeight + extraValue
    });
});

css を使用すると、これを簡単に実現できます。

.sidebar{
position:fixed;
bottom:0;
right:0;
}

/* for browser not supporting fixed position as ie6 */
.oldBrowser .sidebar{
position:absolute;
top:expression( documentElement.scrollTop + body.scrollTop + yourExtraValue );
}

古いブラウザがあるかどうかを判断し、クラス「.oldBrowser」を body タグ要素に追加する必要があります。ドキュメントの準備ができたら、サーバー側またはクライアント側で実行できます。

于 2011-11-30T15:52:01.900 に答える
0

私はjqueryプラグインを使用しました

https://github.com/garand/sticky

一番下で停止するには：

(関数($) {

var limit_bottom=$('#footer').height(); 
$('.product-box').sticky({topSpacing:0, bottomSpacing:limit_bottom});

})(jQuery);

于 2013-11-25T11:20:06.167 に答える