在某一点停止固定元素滚动？

Question

我有一个固定的位置导航，在设定的滚动点处淡入。

我现在需要阻止它在页脚之前滚动（从底部大约400px）。我知道这样做的方法是将位置从固定更改为绝对，但我不确定如何通过jquery实现这一点？

Live Example on the jsFiddle

jQuery的：

var isVisible = false;

$(window).scroll(function(){
    var shouldBeVisible = $(window).scrollTop()>1000;
        if (shouldBeVisible && !isVisible) {
        isVisible = true;
    $('#floatingnav').fadeIn('slow');
    } else if (isVisible && !shouldBeVisible) {
        isVisible = false;
        $('#floatingnav').fadeOut('fast');
    }
});

CSS：

#floatingnav{
    position: fixed;
    top: 40px;
    display: none;
}

Answer 1

检查导航的底部位置是否位于页脚顶部位置下方。如果是这种情况，请设置一个类或特定的css-prop。

$(window).scroll(function(){
  var windowTopPos = $(window).scrollTop();
  var footerTopPos = $('#footer').offset().top;
  var navBottomPos = $('#floatingnav').offset().top + $('#floatingnav').outerHeight();

  if(navBottomPos >= footerTopPos) {
    $('#floatingnav').css('position', 'absolute');
  }
});