Stop sticky sidebar overlapping with footer waypoints

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 :)

Solution

$('#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.