页脚隐藏浮动导航 - 有什么方法可以在浮动导航到达页脚后向上滑动? [英] Footer hides floating nav - Any way to slide floating nav up once it reaches the footer?

问题描述

我正在尝试向侧边栏添加浮动导航.开始滚动后，我让 jquery 将导航浮动到顶部.它在顶部工作得很好，但是一旦你到达底部，页脚就会隐藏导航.导航到达某个点后需要向上滚动.有什么解决办法吗?

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>

示例如下:http://psidev.inhousewp.synergydatasystems.com/products/

推荐答案

这就是你要找的吗: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.

这篇关于页脚隐藏浮动导航 - 有什么方法可以在浮动导航到达页脚后向上滑动?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！