Stop sticky sidebar overlapping with footer waypoints

Question

I have an app that has a side navigation bar with several links. I am using JQuery Waypoints to make sure that the side navigation is fixed as the user scrolls down the page. It is working well except that the links are overlapping with the footer at the bottom of the page.

The view is as follows

.container
  .row
    .col-sm-3
      .side-navbar
        .nav
          %li
            %a{href: '#overview'}
              Overview
          %li
            %a{href: '#specification'}
          ...
    .col-sm-9
      #overview
        ... Content ...
      #specification
        ... Content ...

#footer
  ... content ....

I then have the following in my JS:

$('.side-navbar').waypoint('sticky', {
  offset: 0
});

I am aware that bootstrap comes with affix built in but am keen to keep using waypoints if possible. Any advice on how to stop the overlap would be much appreciated :)

Answer 1

$('#footer').waypoint(function(direction) {
  $('.side-navbar')
    .toggleClass('sticky', direction === 'up')
    .toggleClass('at-bottom', direction === 'down')
}, {
  offset: function() {
    return $('.side-navbar').outerHeight()
  }
})

This says when the top of the footer is [height of the navbar] away from the top of the window (which means the bottom of the navbar is touching the top of the footer), remove the sticky class and add this at-bottom class. Now it's up to you to style the at-bottom class to make it stay where it needs to stay.

Answer 2

I used this jQuery code to keep my sticky content from going into the footer. I used it with the exact code from the question up top. Use this code with waypoint sticky minus the footer height. Mine happened to be 400px. This code was used to render different size pages that all shared the same footer.

$('.side-navbar').waypoint('sticky', {
  offset: '13%'
});

$(document).ready(function() {

     $(window).scroll(function() {
          var scrollVal = $(this).scrollTop();

    if ( scrollVal > ($(document).height() - $(window).height()) - 400) {
           $('.side_navbar').removeClass('stuck');            
       }   
   });

});

I had no background-color on the div I called .stuck to in my css. Having a transparent div made sure the background color didn't overlap the footer. I also adjusted the offset to the .waypoint 'sticky' to be offset: '13%' for my particular needs.