jquery - 页脚隐藏浮动导航 - 有什么方法可以在浮动导航到达页脚后向上滑动？

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

将导航设置为高于z-index页脚。类似的东西z-index:99;肯定会做到。

Answer 2

这是否像您正在寻找的那样：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');
          }
      });
  });

这并没有真正优化，但如果它是您正在寻找的东西，应该可以为您提供一些工作。