Javascript 当img到达页脚时jQuery停止滚动

当你在页面底部滚动时，我找不到如何停止固定在页脚div顶部的图像

我试图计算页脚高度以将其从

窗口中删除。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,
      });
    }
  })
});

$（函数（）{
$（窗口）。滚动（函数（）{
var footHeight=$（'#footer'）.offset（）.top；
变量高度=（$（窗口）.height（））-英尺高度）；
//如果（$（文档）.height（）-英尺高度英尺高度）{
$（'.footer arrow'）.css({
位置：'固定'，
底数：20
});
}否则{
$（'.footer arrow'）.addClass（'fixed'）；
$（'.footer arrow'）.css({
位置：'固定'，
底图：140，
});
}
})
});

如果要在页脚顶部停止图像，则不应选中条件

$（this）.scrollTop（）>英尺高度

。相反，您应该检查图像的底部是否达到页脚的顶部

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

什么是“imageBottom”取决于图像的高度以及它与窗口顶部的距离

我希望有帮助

更新

基于您的JSFIDLE，它应该可以工作：

$(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),
        });
    }
})

$（窗口）。滚动（函数（）{
var elementOffset=$（'#footer'）.offset（）.top；
var footerTop=（elementOffset-$（window.scrollTop（））；
如果（页脚顶部>（$（窗口）.height（）-20））{
$（'.footer arrow'）.css({
位置：'固定'，
底数：20
});
}
//调试器；
如果（页脚顶部<（$（窗口）.height（）-20））{
$（'.footer arrow'）.addClass（'fixed'）；
$（'.footer arrow'）.css({
位置：'固定'，
底部：（$（窗口）.height（）-footerTop），
});
}
})

请将您的html包含在内好吗？谢谢您的帮助Alireza，根据您告诉我的，我尝试了其他方法，但无效eather:@katalinanadasi我更新了我的答案。它应该对你有用，真的很好用。太棒了@alireza kasaaian，非常感谢@katalinanadasi不客气。如果你接受我的回答，我会很高兴：）