Stop fixed sidebar at footer - prevent overlapping
<p>A sidebar becomes fixed after 400 pixels from top. Therefore I use this code found on stack:</p>

<pre><code>&lt;div id="gettop"&gt;&lt;/div&gt;

&lt;script type="text/javascript"&gt;
jQuery(function($) {
function fixDiv() {
var $cache = $('#gettop');
if ($(window).scrollTop() &gt; 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();
});
</code></pre>

<p></p>

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

<p>I tried some code I found here without success. </p>

<p><a href="https://stackoverflow.com/questions/18053326/how-to-prevent-fixed-button-from-overlapping-footer-area-and-stop-the-button-on">How to prevent fixed button from overlapping footer area and stop the button on top of where the footer is located</a></p>

<p><a href="https://stackoverflow.com/questions/8653025/stop-fixed-position-at-footer">Stop fixed position at footer</a></p>

<p><a href="https://stackoverflow.com/questions/21408441/fixed-sidebar-on-the-scroll-stop-at-div">Fixed sidebar on the scroll stop at div</a></p>

<p>I am quite sure, that I made a mistake in mixing the codes.</p>

<p>Thanks for help.</p>