fixed position until reaching footer

Question

I've been trying to make a sidebar menu that will have fixed positioning up to the footer, and then stop right above the footer as the user keeps scrolling down from there. I've looked at a lot jquery code that others have used, however, my side menu box still keeps on staying fixed even after the footer. I have saved a test sample at this link: http://jsfiddle.net/9281gzrh/2/

$(document).ready(function() {
  function isScrolledTo(elem) {
    var docViewTop = $(window).scrollTop(); //num of pixels hidden above current screen
    var docViewBottom = docViewTop + $(window).height();
    var elemTop = $(elem).offset().top; //num of pixels above the elem
    var elemBottom = elemTop + $(elem).height();
    console.log("Elem Bottom: "+elemBottom);
    console.log("Return: "+ (elemTop <= docViewTop));
    return ((elemTop <= docViewTop || elemTop >= docViewTop));
  }
  var catcher = $('.catcher');
  var sticky = $('.menu');
  var footer = $('#footer');
  var footTop = footer.offset().top;
  var lastStickyTop = sticky.offset().top;
  $(window).scroll(function() {
    if(isScrolledTo(sticky)) {
      sticky.css('position','fixed');
      sticky.css('top','2px');
    }
    var stopHeight = catcher.offset().top + catcher.height();
    var stickyFoot = sticky.offset().top + sticky.height();

    if(stickyFoot > footTop -10){ //Check if sticky's foot passes footer's top
      console.log("Top of Footer");
      sticky.css({
        position:'absolute',
        top: (footTop - 20) - sticky.height()
      });
    } else {
      if ( stopHeight > sticky.offset().top) {
        console.log("Default position");
        sticky.css('position','absolute');
        sticky.css('top',stopHeight);
      }
    }
});
}); 

CSS:

.menu {
    display: inline-block;
    overflow: hidden;
    padding: 8px;
 background-color:#1668af;
   opacity:0.8;
    color:white;
    font-family: arial;
   border-radius:6px;
 position: fixed;
   top:20%;
}
.menu > * {
    display: inline-block;
    vertical-align: top;
}
.menu-handle {
    padding: 10px;
    background: #1668af;
    cursor: pointer;
}
.menu-menu {
    background:rgba(0,0,0,0.8);
    border-color: black;
    border-radius:6px; 
}
.menu-items {
    list-style: none;
    margin: 0;
    padding: 16px 69% 16px 100px;
}
.menu-closed .menu-menu {
    width: 0;
    height: 0;
}

#footer {
  background-color:#dee5eb; 
}
HTML:

<br /><br />
<br />
<br /><br />
<br />
<br /><br />
<br />
<br />
<br /><br />
<br />
<br /><br />
<br />
<br /><br />
<br />
<br />
<br /><br />
<br />
<br /><br />
<br />
<br /><br />
<br />
<br />
<br /><br />
<br />
<br /><br />
<br />
<br /><br />
<br />
<br />
<div class="catcher">
    <!--catcher-->
</div>
<div class="menu menu-closed">
    <div class="menu-handle">
    </div>
        <div class="menu-menu">
    </div>
</div>
    <div class="catcher">
    <!--catcher-->
</div>
    
    <div id="footer">---------------------------------------------------</div>
    <br /><br />
<br />
<br /><br />
<br />
<br /><br />
<br />
<br />
<br /><br />
<br />
<br /><br /><br /><br />
<br />
<br /><br />
<br />
<br /><br />
<br />
<br />
<br /><br />
<br />
<br /><br />