固定側邊欄在到達頁腳時應該有邊距

Question

我正在開發一個有固定頁腳，固定導航欄和固定側欄的網站。 正如我scroll > 70側欄變得固定。

但我到了固定的側邊欄重疊的頁腳區域也被固定在頁面的底部，

我擔心的是我想實現一個jQuery代碼，以便爲我到達頁腳側邊欄不應該重疊頁腳區域，並將動態獲得邊距，因此它不應與頁腳區域重疊。

HTML代碼網站

<section class="footer" id="footer"> 
     <div class="container"> 
     <!-- row of columns --> 
     <div class="row"> 
      <div class="col-lg-12"> 
      <footer class="footer-inner"> 
       <div class="footer-centered"> 
       <nav class="footer-menu"> 
        <a href="#">About</a> 
        <a href="#">Jobs</a> 
        <a href="#">Partnerships</a> 
        <a href="#">Contact</a> 
        <a href="#">Terms of service</a> 
        <a href="#">Privacy policy</a> 
       </nav>      
       <h6 class="developer-wish">Made with ♥ in BARCELONA</h6>  
       <span class="copyright">Legal Notices<br>&copy; CircoViral.com, LLC. Trademarks belong to their respective owners. All rights reserved.</span>  
       </div> 
      </footer> 
      </div> 
     </div> 

     </div> <!-- /container --> 
    </section> 

CSS頁腳

.footer { 
     border-top: 1px solid #efefef; 
     color: #7c858c; 
     font-size: 1.2rem; 
     text-align: center; 
     background-color: #fff; 
     position: relative; 
     left: 0; 
     right: 0; 
     bottom: 0; 
     height: 370px; 
     margin: -350px auto 0; 
    } 
    .footer:before { 
     background-color: #e8e7e7; 
     border-bottom-color: #ebeaea; 
     border-top-color: #dfdede; 
     top: 0; 
    } 
    .footer:after { 
     background: -moz-linear-gradient(left center, #fc4568 0%, #fc4568 25%, #87df72 25%, #87df72 50%, #7c858c 50%, #7c858c 75%, #ffa215 75%, #ffa215 100%) repeat scroll center top/100% auto transparent; 
     bottom: 0; 
     content: ""; 
     display: block; 
     height: 9px; 
     left: 0; 
     position: absolute; 
     right: 0; 
     border-bottom: 1px solid transparent; 
     border-top: 1px solid transparent; 
} 
.footer .footer-inner { 
    height: 361px; 
    bottom: 9px; 
    left: 0; 
    position: fixed; 
    right: 0; 
} 
.footer .footer-centered { 
    padding: 0 7px; 
    margin: 0 auto; 
    max-width: 1002px; 
    min-width: 320px; 
} 
@media (max-width: 991px) { 
    .footer .footer-centered { 
     max-width: 800px; 
    } 
} 
.footer .footer-menu { 
    padding: 122px 0 0; 
} 
.footer .footer-menu a { 
    display: inline-block; 
    font-size: 1.8rem; 
    margin: 0 3.1%; 
} 
.footer .developer-wish { 
    display: inline-block; 
    left: 0; 
    position: absolute; 
    right: 0; 
    font-size: 1.8rem; 
    bottom: 81px; 
} 
.footer .copyright { 
    display: inline-block; 
    left: 0; 
    position: absolute; 
    right: 0; 
    bottom: 14px; 
    line-height: 2; 
} 

我不能粘貼在這裏，整個代碼， 您可以查詢網站的完整代碼開發服務器 鏈接到開發網站：CircoViral

Answer 1

我想有人已經這樣做了。看看這個： http://imakewebthings.com/jquery-waypoints/shortcuts/sticky-elements/

然後用這個代碼進行修改：

$('.my-sticky-element').waypoint('sticky', { 
    offset: 30 // Apply "stuck" when element 30px from top 
});