在某一點停止固定元素滾動？

Question

我有一個固定的位置導航，在設定的滾動點淡入。

我現在需要在頁腳之前滾動它（從底部大約400px）。 我知道這樣做的方法是將位置從固定更改為絕對但是我不確定如何通過jquery實現它？

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