当用户点击页面底部时的jQuery

Question

我一直在为我的网站进行滚动到顶部功能，并且该部分工作正常。 但是我的问题是我有一个固定的div，当它到达页面底部时，它与页脚重叠。

这是我正在使用的功能。

$(document).scroll(function (e) {
  if (document.body.scrollTop >= 800) {
    $('#beamUp').show(1000);
         } else {
    $('#beamUp').hide(1000);
    return false;
  }  
});

有什么办法可以检测到我何时单击页面的该部分并阻止div越过该部分。非常感谢您的帮助！

jsFiddle： http : //jsfiddle.net/zazvorniki/RTDpw/

Answer 1

只需获取页面的高度，减去所讨论的div的高度，以及页脚...，确保顶部永远不会大于该值...您还需要一个onresize事件处理函数重新评估那个价值。

---

看着你的jsfiddle ... 这是我的编辑

在您的滚动侦听器中，我正在检查页面的位置，并适当地调整浮动框的底部位置。 我还设置了初始display：none，因此您不需要在初始脚本中调用.hide（）。 另外，调整窗口大小具有滚动效果，供您使用，因此我更改了两个事件的侦听器。

$(document).on('scroll resize', function (e) {
  var viewHeight = $(window).height();
  var viewTop = $(window).scrollTop();
  var footerTop = $("footer").offset().top;
  var baseline = (viewHeight + viewTop) - footerTop;
  var bu = $("#beamUp").css({bottom: (baseline < 0 ? 0 : baseline) + 'px'});

  if (viewTop >= 50) {
    bu.show(1000);
  } else {
    bu.hide(1000);
  }
});