固定位置div，可相對於頁腳調整高度

Question

我正在一個網站上工作，該網站有兩個側邊欄和一個用於頁面內容的中心包裝。 側欄將具有鏈接，這些鏈接將使用戶跳至網頁的相對部分。 這些側邊欄具有固定的位置，以便在用戶向下滾動頁面時跟隨用戶，但是當用戶到達頁面底部的頁腳時，我希望側邊欄的高度縮小，以便頁腳不會阻塞鏈接這些側邊欄。

很難確切解釋頁面的布局方式，因此我已經將網站以其基本形式放入jsfiddle中，請鏈接此處 。

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

});

這是JSFiddle演示

Answer 2

使用z-index或使用javascript或jquery代碼。