0

私が取り組んでいるウェブサイトでは、スクロールフォローを利用してカート/アイテムメニューをページでスクロールしています。そして、このコードを使用しています $(function() {

var $sidebar   = $('.sidebar-scroll'),
    $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 = 200;

$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
        });
    }
});

});

問題は、サイドバーがメニューであるため、ユーザーがカートに追加するために選択したものに応じて、高さが可変であることです。メニューがフッターを超えないように、このコードを変更するにはどうすればよいですか。ただし、それに応じてサイズを調整できます。

4

1 に答える 1

1

フッターの代わりにコンテンツを高さの参照として使用して、コードを作り直しました。

作業デモ： http： //jsfiddle.net/tF8Dj/

var $sidebar   = $('aside'),
    $content   = $('#content');

if ($sidebar.length > 0 && $content.length > 0) {
    var $window    = $(window),
        offset     = $sidebar.offset(),
        timer;

    $window.scroll(function() {
        clearTimeout(timer);
        timer = setTimeout(function() {
            if ($content.height() > $sidebar.height()) {
                var new_margin = $window.scrollTop() - offset.top;
                if ($window.scrollTop() > offset.top && ($sidebar.height()+new_margin) <= $content.height()) {
                    // Following the scroll...
                    $sidebar.stop().animate({ marginTop: new_margin });
                } else if (($sidebar.height()+new_margin) > $content.height()) {
                    // Reached the bottom...
                    $sidebar.stop().animate({ marginTop: $content.height()-$sidebar.height() });
                } else if ($window.scrollTop() <= offset.top) {
                    // Initial position...
                    $sidebar.stop().animate({ marginTop: 0 });
                }
            }
        }, 100); 
    });
}

この例では、サイドバーとコンテンツがあることを前提としています。タイマーはパフォーマンスのためにあります。

それがあなたのために働くことを願っています！

編集：同じことを行うjqueryプラグインを使用したTuts+チュートリアルも見つけました。

于 2012-11-02T13:57:34.847 に答える