当用户到达屏幕底部时淡出元素

Question

我有一个元素始终保持在屏幕底部的 5%（位置：固定；底部：5%；）。

这只是一个提示，表示“向下滚动”。我想让它在你到达屏幕底部时淡出。

如何检测用户已经到达屏幕底部？

Answer 1

您需要获取文档的宽度并使用窗口宽度和滚动偏移来计算它：

if (documentWidth == (windowWidth + scrollOffset)) {
   $('#hint').fadeOut();
}

这是类似的讨论：检查用户是否滚动到底部

Answer 2

使用jquery的scroll()方法：

var fadeFlag = false;

$(window).scroll(function(e) {

  // Check if we reached bottom of the document and fadeOut the target element
  if( $(window).height() + $("html").scrollTop() == $(document).height()-1) {

      $('#target').fadeOut();
      fadeFlag = true;

  } else {
      // Here you can do fadeIn
      if(fadeFlag) $('#target').fadeIn();

      fadeFlag = false;
  }
});

我使用了$("html")而不是$(window)，因为它不会在IE8中给你带来麻烦