javascript - 在特定位置停止固定元素滚动？

我有一个固定位置的导航栏，该导航栏在设置的滚动点处逐渐消失。

现在，我需要在页面页脚(距离底部约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;
}

最佳答案

检查导航的底部位置是否在页脚顶部位置之下。如果是这种情况，请设置一个类或特定的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');
  }
});