页脚隐藏浮动导航-一旦到达页脚，有什么方法可以将浮动导航向上滑动? [英] 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/

Is this like what you're looking for: 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屋！