相対的に配置されたコンテンツを固定コンテンツに動的に変更する - バグ

Question

私は画面より大きなコンテンツを含むサイドバーを持っています。ユーザーがスクロールすると、そのコンテンツが最後のビットまで表示されます。それから、できるだけ多くのコンテンツが画面に残るように修正しておきたい。私は実際にあなたがSOに質問を掲示しているときに「類似の質問」のサイドバーとまったく同じように働きたい。これらのリンクのそれぞれで、スクロールダウンします。壊れたケースでは、すべてがどのように跳ね上がるのか気づく。これはあなたがページの最後に達したときに、スクロールイベントが再トリガされているように見える壊れた場合http://jsfiddle.net/mrtsherman/G4Uqm/2/

しかし、この場合には壊れ= http://jsfiddle.net/mrtsherman/G4Uqm/1/

を=のように

は動作するはずです。これにより、後続のスクロールイベントがトリガされ、すべてのものがスクラップされます。このケースを適切に処理するにはどうすればよいですか？私はそれを理解できません。

$(document).ready(function() { 

var dynamic = false; 
var topOfSidebar = $("#sidebar").offset().top; 
var leftOfSidebar = $("#sidebar").offset().left; 
var botOfSidebar = topOfSidebar + $("#sidebar").height(); 
var botOfScreen = $(window).height() + $(window).scrollTop(); 

//if sidebar fits on screen then use fixed version of it 
if (botOfSidebar < $(window).height()) { 
    $("#sidebar").addClass("fixed"); 
    $("#sidebar").css("top", topOfSidebar); 
    $("#sidebar").css("left", leftOfSidebar); 
} 
else { 
    dynamic = true; 
} 
//toggle sidebar class when user scrolls 
$(window).scroll(function() { 
    console.log($("#sidebar").css("position")); 
    botOfScreen = $(window).height() + $(window).scrollTop(); 
    //return; 
    if (botOfSidebar < botOfScreen && dynamic) { 
     $("#sidebar").addClass("fixed"); 
     //$("#sidebar").css("bottom", 0); 
     //$("#sidebar").css("left", leftOfSidebar); 
    } 
    else if (dynamic) { 
     $("#sidebar").removeClass("fixed"); 
    } 
}); 
}); 

Answer 1

私はこの1つを自分で考え出しました。そのトリックは、div内のコンテンツをmin-height属性でラップすることです。サイドバーを固定にすると、divはサイドバーの場所を保持します。したがって、画面のサイズを変更する必要はありません。

1. .wrapは
2. .parentは、サイドバーの親（新しいDIV）を取得DIVを作成し

3. 分の高さは、サイドバーの高さであるCSSプロパティを追加します。パディングとマージンを削除

   $（ "＃サイドバー"） .wrap（ ''） .parent（） の.css（ "最小の高さ"、this.height（）） の.css（ "パディング" 、 "0px"） .css（ "margin"、 "0px"）;