Fixed position div with adjusting heights relative to footer

Question

I am working on a website which has two sidebars and a centre wrapper for the pages content. The side bars are going to have links which will jump the user to the relative part of the webpage. These sidebars have a fixed position so that it follows the user as they scroll down the page but when the user reaches the footer at the bottom of the page, I would like the sidebar heights to shrink so the footer doesn't block the links in those sidebars.

It's hard to explain exactly how the page is laid out so I have put my website into jsfiddle in it's basic form, link here .

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

I would like to have a 20 pixel margin between the footer (in grey) and the sidebars (in red) at all times, and I haven't figured out how to get them to shrink in relation to the footer coming into the browser window.

Ideally I don't want to use JavaScript and keep the website using HTML and CSS primarily if possible.

Thanks in advance. Matt

Answer 1

This is how I did it:

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

Answer 2

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