Footer hides floating nav - Any way to slide floating nav up once it reaches the footer?

问题

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/

回答1:

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.