Как сделать так, чтобы фиксированная боковая панель остановилась у нижнего колонтитула?

Question

Прямо сейчас я использую этот код для моей условно исправленной боковой панели:

$(function() {
 var a = function() {
 var b = $(window).scrollTop();
 var d = $("#sidebar-right").offset().top;
 var c=$("#scroller");
 var e=$("#scroller-left");
 if (b>d) {
  c.css({position:"fixed",top:"5px"})
  e.css({position:"fixed",top:"5px"})
 } else {
  if (b<=d) {
    c.css({position:"relative",top:""})
    e.css({position:"relative",top:""})
  }
 }
};
$(window).scroll(a);a()
});

Проблема в том, что если содержимое боковой панели слишком высокое, оно переходит в нижний колонтитул.Что мне нужно добавить к коду, чтобы он останавливался у нижнего колонтитула?

Большое спасибо.

Answer 1

Вы хотите, чтобы страница всегда была достаточно высокой, чтобы поместиться на боковой панели, или вы хотите обрезать боковую панель, чтобы она всегда подходила?

Для первого, просто сделайте элемент, который является частью потока документов (например, возможно, # sidebar-right в вашем примере) больше, чем скроллер;

if ($("#sidebar-right").height() < $("#scroller").height())
    $("#sidebar-right").height($("#scroller").height());

Если это последнее, отрежьте боковую панель и скройте все переполнения;

if ($("#scroller").height() > ($("#footer").offset().top - $("#sidebar-right").offset().top)) {
    $("#scroller").css("overflow", "hidden");
    $("#scroller").height($("#footer").offset().top - $("#sidebar-right").offset().top));
}