页脚隐藏浮动导航 - 一旦到达页脚，有什么方法可以向上滑动浮动导航？

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; 这样的东西肯定会这样做。