当img固定到达页脚时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),
        });
    }
})