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');
          }
      });
  });

这并没有真正优化，但如果你正在寻找它，应该给你一些工作。

页脚隐藏浮动导航 - 一旦到达页脚，任何方式将浮动导航向上滑动？

2 个答案: