Footer hides floating nav - Any way to slide float

Question

I'm trying to add a floating navigation to the side bar. I have jquery floating the nav to the top after you begin scrolling. It works fine at the top, but once you reach the bottom the footer hides the navigation. The navigation needs to scroll up once it reaches a certain point. Any solutions?

 <script type="text/javascript">
   $(document).ready(function () {  
var top = $('#floatingNav').offset().top - parseFloat($('#floatingNav').css('marginTop').replace(/auto/, 0));
$(window).scroll(function (event) {
var y = $(this).scrollTop();

  if (y >= top) {

     $('#floatingNav').addClass('fixed');
   } else {

     $('#floatingNav').removeClass('fixed');
   }
  });
});

</script>

Here's the example: http://psidev.inhousewp.synergydatasystems.com/products/

Answer 1

Give the navigation a higher z-index than the footer. Something like z-index:99; will definitly do it.

Answer 2

Is this like what you're looking for: http://jsfiddle.net/N5AC8/1/

$(document).ready(function() {
      var top = $('#floatingNav').offset().top - parseFloat($('#floatingNav').css('marginTop').replace(/auto/, 0));
      var maxTop = $(document.body).height() - $('footer').height() - $('#floatingNav').outerHeight();
      $(window).scroll(function(event) {
          var y = $(this).scrollTop();
          console.log(y, maxTop);
          $('#floatingNav').css({
              position: '',
              top: ''
          });
          if (y >= maxTop) {
              $('#floatingNav').css({
                  position: 'absolute',
                  top: maxTop
              });
          } else if (y >= top) {
              $('#floatingNav').addClass('fixed');
          } else {
              $('#floatingNav').removeClass('fixed');
          }
      });
  });

This is not really optimized, but should give you something to work from if it's what you're looking for.