使粘性/固定元素在页脚处停止

我试图让侧栏停止跟随用户的滚动一旦它击中页脚。 现在我将z-index设置为-2以便它位于页脚后面，但它突出了一点点。

JavaScript的

 $(document).ready(function () { var floatingDiv = $('#side_bar'); var floatingDivPosition = floatingDiv.position(); $(window).scroll(function (){ var scrollBarPosition = $(window).scrollTop(); if(scrollBarPosition >= floatingDivPosition.top) { floatingDiv.css({ 'position': 'fixed', 'top': 55, 'width': '18.6676%', 'z-index': -2 }); } else{ floatingDiv.css({ 'position': 'relative', 'top': 0, 'width': '79.4392%' }); } }); }); 

HTML

 
 
 
 
We cater to
 Contractor Wood/Sport Floors Grocery/Commercial Education 
Simplicity
 
  
 
 
 
 //// bunch of stuff here 
 
 
 
 /// bunch of stuff here  

CSS

 #col_1 { float:left; margin-top:44px; width:23.4994%; margin-left:3.9531%; } #side_bar { background:#003768; min-height:665px; width:79.4392%; border-radius:20px; box-shadow: 10px 10px 5px #888; } #col_2 { float:right; margin-top:44px; width:68.5944%; margin-right:3.9531%; } footer { background-image:url(../images/foot_background.gif); background-repeat:no-repeat; background-size:cover; } 

页脚背景几乎与屏幕高度相同（当我用Chrome检查时，大约为824px）。

Answer 1

在Youtube上找到了这个gem， url是https://www.youtube.com/watch?v=5s0L6dCVevk并稍微改了一下，以便得到以下内容，这有效。

 $(function() { if ($('#side_bar').length) { var el = $('#side_bar'); var stickyTop = $('#side_bar').offset().top; var stickyHeight = $('#side_bar').height(); $(window).scroll(function(){ var limit = $('footer').offset().top - stickyHeight - 20; var windowTop = $(window).scrollTop(); if (stickyTop < windowTop) { el.css({ position: 'fixed', top: 55, width: '18.6676%' }); } else { el.css({ position: 'static', width: '79.4392%' }); } if (limit < windowTop) { var diff = limit - windowTop; el.css({ top: diff }); } }); } });