頁腳隱藏浮動導航 - 任何方式滑動浮動導航一旦到達頁腳？

Question

我想添加一個浮動導航到側欄。開始滾動後，我有jquery將導航浮動到頂部。它在頂部工作正常，但一旦到達底部，頁腳隱藏導航。一旦達到某個特定點，導航需要向上滾動。任何解決方案

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

這裏的例子：http://psidev.inhousewp.synergydatasystems.com/products/

Answer 1

這就像你在找什麼：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'); 
      } 
     }); 
    }); 

這不是真正的優化，但應該給你的東西從它是否是你在找什麼工作。

Answer 2

給導航比頁腳更高z-index。像z-index:99;這樣的東西將確定地做到這一點。