javascript - 相对于页脚调整高度的固定位置 div

Question

我在一个网站上工作，该网站有两个侧边栏和一个用于页面内容的中心包装器。侧边栏将有链接，将用户跳转到网页的相关部分。这些侧边栏有一个固定的位置，因此当用户向下滚动页面时它会跟随用户，但是当用户到达页面底部的页脚时，我希望侧边栏的高度缩小，这样页脚就不会阻塞链接那些侧边栏。

很难准确解释页面的布局方式，所以我将我的网站以基本形式放入 jsfiddle，链接 here .

<div class="left">Lorem Ipsum ...</div>
<div class="centre">centre</div>
<div class="right">Lorem Ipsum ...</div>
<div class="footer">footer</div>

我希望页脚(灰色)和侧边栏(红色)之间始终有 20 像素的边距，但我还没有想出如何让它们相对于进入的页脚缩小浏览器窗口。

理想情况下，我不想使用 JavaScript，并尽可能让网站主要使用 HTML 和 CSS。

提前致谢。马特

Answer 1

我是这样做的:

var spacing = 50;
var defaultHeight = $(".left").outerHeight();

$(window).scroll(function() {

  var calcHeight = $(".footer").offset().top - $(window).scrollTop() - spacing;

  if (calcHeight < defaultHeight) {
    $(".left, .right").height(calcHeight);
  } else {
    $(".left, .right").height(defaultHeight);
  }

});

Here is the JSFiddle demo