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

本文介绍了淡出元素，当用户到达屏幕底部时的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个元素始终保持在屏幕底部的5％(位置:固定；底部:5％；).

I have an element that always stays 5% of the bottom of the screen (position: fixed; bottom: 5%;).

这只是一个提示，上面写着向下滚动".当您到达屏幕底部时，我想使其淡出.

It's just a hint, that says "Scroll down". I want to make it fadeOut when you reached the bottom of the screen.

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

How to detect that the user has reached the bottom of the screen?

推荐答案

使用jquery scroll()方法:

Use jquery scroll() method:

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中给您带来麻烦

I've used $("html") instead of $(window) as It won't make you troubles in IE8

这篇关于淡出元素，当用户到达屏幕底部时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！