Footer hides floating nav - Any way to slide float

问题:

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.

回答2:

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