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 */ }

什么是＆＃34; imageBottom＆＃34;取决于图像的高度以及距离窗口顶部的距离有多长。

我希望它有所帮助。

<强>更新

基于你的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),
        });
    }
})

当img固定到页脚时，jQuery停止滚动

1 个答案: