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

Question

I have a fixed position nav that fades in at a set scroll point.

I now need to stop it scrolling just before the page footer (about 400px from the bottom). I know the way to do this would be to change the position from fixed to absolute but I'm not sure how to implement that through 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

Check if the bottom position of the navigation is below the footer top position. If this is the case, set a class or a specific 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');
  }
});