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

我正在尝试向侧栏添加浮动导航。 在你开始滚动之后，我将jquery浮动到导航到顶部。 它在顶部工作正常，但一旦到达底部，页脚就会隐藏导航。 一旦达到某个点，导航就需要向上滚动。 有解决方案？

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

这是一个例子： 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;这样的东西z-index:99; 肯定会这样做。