サイドバーをビューポートに保持する、スクロールの問題

Question

ページを上下にスクロールするときにサイドバーをビューポートに保持するためのソリューションがあります。サイドバーがコンテンツ領域よりも長いときに問題が発生し、サイドバーがフッターを押し続けると、このジッタの影響をスクロールし続けることになります。

私はjsFiddleでこの設定の例を持っている：http://jsfiddle.net/U9F7w/2/（フルスクリーン：http://jsfiddle.net/U9F7w/2/embedded/result/）

私の質問があり、それが下/フッター領域に触れた後は、サイドバーの停止を作成する方法はありますか？

残念ながら、サイドバーを絶対に設定することについてはsome solutionsと読んでいますが、残念ながらそれは既存のサイトであり、位置を変更しても既存のページ要素が多く混乱してしまいました。

は、ここに私が働いているのjQuery/JS：私が考えた

// set the offset 
    var sidebarOffset = $(".sidebar").offset(); 
    var sidebarPadding = 15; 

    // when the window scrolls, keep sidebar in view 
    $(window).scroll(function() { 
     if ($(window).scrollTop() > sidebarOffset.top) { 
      $(".sidebar").stop().animate({marginTop: $(window).scrollTop() - sidebarOffset.top + sidebarPadding }); 
     } 
     else { 
      $(".sidebar").stop().animate({marginTop: 0}); 
     }; 
    }); 

編集

ことの一つは、1の一番下かどうかを検出するために（これが可能であるかどうかわからない）でしたdivが他のスクロールバーの下端よりも低い場合、スクロールを停止します。 1つのdivの下限が他のdivよりも低いかどうかを検出する方法はありますか？

Answer 1

サイドバーの高さが内容のものより大きいかどうかを確認します。

var ct = $(".content"); 
var sb = $(".sidebar"); 
var sbOffsetTop = sb.offset().top; 
var sbPadding = 15; 

$(window).scroll(function() { 
    if (sb.height() < ct.height()) { 
     if ($(window).scrollTop() > sbOffsetTop) { 
      sb.stop().animate({top: $(window).scrollTop() - sbOffsetTop + sbPadding }); 
     } 
     else { 
      sb.stop().animate({top: 0}); 
     }; 
    }; 
}); 

はdemo fiddle with large contentとdemo fiddle with large sidebarを参照してください。

なぜ私は正確に、私はposition: relativeと併せてtopを使用しますが、marginTopもうまく動作します。