0

私はウェブサイトを構築しています。http://check.topicwine.com 私の作品をご覧ください。

静的なサイドバーを作りたいです。私はコードを使用しています：

$(function() {
        var offset = $("#ad-wrapper").offset();
        var topPadding = 60;
        $(window).scroll(function() {
            if ($(window).scrollTop() > offset.top) {
                $("#ad-wrapper").stop().animate({
                    marginTop: $(window).scrollTop() - offset.top + topPadding
            });
            } else {
                $("#ad-wrapper").stop().animate({
                marginTop: 0
            });
        };
});
});

サイドバーは付いてきますが、本来あるべきではない場所にも移動します。つまり、フッターにも入ります。むしろ、フッターに重なっています。

グリッドの横で止めてほしい。

前もって感謝します。:)

4

2 に答える 2

0

overflow:hiddendiv#contentに追加します。このようにして、コンテンツ div の適切な高さを取得します。
サイド$('#content').height() + $('#content').offset().topバーが移動する最大距離です。つまり、サイドバーの offset.top + 高さはこれを超えてはなりません。スクロール ハンドラーにこのチェックを追加します。

于 2013-06-17T11:01:48.193 に答える
0

サイドバーは要素を超えることができないため、上部マージンに制限を設定し$('#main')ます。

$(function() {
    var offset = $("#ad-wrapper").offset();
    var topPadding = 60;
    $(window).scroll(function() {
        var scrollTop = $(window).scrollTop(); // Store this for convenience
        if (scrollTop > offset.top) {
            var newMarginTop = scrollTop - offset.top + topPadding;
            // The sidebar can only go so far!
            var marginLimit = $('#main').height() + $('#main').offset().top - offset.top - $("#ad-wrapper").height();
            if (newMarginTop > marginLimit) 
                newMarginTop = marginLimit;
            $("#ad-wrapper").stop().animate({
                marginTop: newMarginTop 
            });
        } else {
            $("#ad-wrapper").stop().animate({
                marginTop: 0
            });
        }
    });
});
于 2013-06-17T10:50:00.397 に答える