如何使固定侧边栏停在页脚处？

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));
}