fixed sidebar should get margin when reach footer

Question

I am developing a website which has a fixed footer, Fixed navbar and a fixed sidebar. As i scroll > 70 sidebar become fixed.

but as i reach the bottom of the page the fixed sidebar is overlapping the footer area which is also fixed,

My Concern is i wanted to implement a jquery code so as i reach the footer the sidebar should not overlap the footer area and will get a margin dynamically so it should never overlap the footer area.

HTML Code for Site

<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 for the footer

    .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;
}

i can't paste the whole code here , You can check the complete code of website on development server LINK TO THE DEVELOPMENT SITE : CircoViral

score 0 · Answer 1 · answered Sep 02 '14 at 13:36

I think someone did this already. Take a look on this: http://imakewebthings.com/jquery-waypoints/shortcuts/sticky-elements/

And then modify it with this code:

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

fixed sidebar should get margin when reach footer

1 Answers1