0
私は画面より大きなコンテンツを含むサイドバーを持っています。ユーザーがスクロールすると、そのコンテンツが最後のビットまで表示されます。それから、できるだけ多くのコンテンツが画面に残るように修正しておきたい。私は実際にあなたが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");
}
});
});