jQueryが固定されたときにスクロールを停止する

Question

ページの下部をスクロールすると、フッターdivの上部に固定された画像を停止する方法が見つかりません。

フッタの高さを計算して、window.heightから削除して、強制的にその位置でスクロール停止を試みました。

.footer-arrowは私の固定画像です。

次のコードは、この半成功しない：

$(function() { 
    $(window).scroll(function() { 
    var footHeight = $('#footer').offset().top; 
    var height = (($(window).height()) - footHeight); 
    // if ($(document).height() - footHeight <= ($(window).height() + $(window).scrollTop())) 
    if ($(this).scrollTop() > footHeight) { 
     $('.footer-arrow').css({ 
     position: 'fixed', 
     bottom: 20 
     }); 
    } else { 
     $('.footer-arrow').addClass('fixed'); 
     $('.footer-arrow').css({ 
     position: 'fixed', 
     bottom: 140, 
     }); 
    } 
    }) 
}); 

Answer 1

フッターの上部にあなたのイメージを停止したい場合は、条件$(this).scrollTop() > footHeightをチェックするべきではありません。代わりに、画像の下部にはフッターの先頭に

var elementOffset = $('#footer').offset().top; 
var footerTop = (elementOffset - $(window).scrollTop()); 
if(imageBottom > footerTop){ /* image is fixed */ } else { /* image keep image above footer */ } 

に達した場合は、チェックすべき「imageBottom」とは何か、あなたのイメージの高さ何に依存し、ウィンドウの上部からの距離はどのくらいです。

私はそれが役に立ちそうです。

更新

あなたjsfiddleに基づいて、それが動作するはずです：

$(window).scroll(function() { 
    var elementOffset = $('#footer').offset().top; 
    var footerTop = (elementOffset - $(window).scrollTop()); 
    if(footerTop > ($(window).height() - 20)) { 
     $('.footer-arrow').css({ 
     position: 'fixed', 
     bottom: 20 
     }); 
     } 
     //debugger; 
    if(footerTop < ($(window).height() - 20)){ 
     $('.footer-arrow').addClass('fixed'); 
      $('.footer-arrow').css({ 
      position: 'fixed', 
      bottom: ($(window).height() - footerTop), 
     }); 
    } 
})