фиксированная боковая панель должна получить маржу при достижении нижнего колонтитула

Question

Я разрабатываю сайт с фиксированным нижним колонтитулом, фиксированный навигатор и фиксированную боковую панель. As i боковой боковой фиксированный.

но, как я достичь нижней части страницы неподвижная боковая панель, перекрывающей область колонтитула, которая также неподвижную,

Моя забота я хотел бы реализовать код 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 
});