Stop fixed sidebar at footer - prevent overlapping

Question

A sidebar becomes fixed after 400 pixels from top. Therefore I use this code found on stack:

<div id="gettop"></div>

<script type="text/javascript">
jQuery(function($) {
function fixDiv() {
var $cache = $('#gettop');
if ($(window).scrollTop() > 400)
  $cache.css({
    'position': 'fixed',
    'top': '8px',
    'margin-left': '20px',
    'border': '1px solid #ccc'
  });
else
  $cache.css({
    'position': 'relative',
    'top': 'auto'
  });
}
$(window).scroll(fixDiv);
fixDiv();
});

The Code works great. But the sidebar is overlapping the footer. How can I prevent this?

I tried some code I found here without success.

How to prevent fixed button from overlapping footer area and stop the button on top of where the footer is located

Stop fixed position at footer

Fixed sidebar on the scroll stop at div

I am quite sure, that I made a mistake in mixing the codes.

Thanks for help.

Answer 1

Try to give bigger z-index to the element you want to be on top.