Fade out element, when user reach the bottom of the screen

Question

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?

Answer 1

You need to get width of the document and calculate it with window width and scroll offset:

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

Here was similar discussion: Check if a user has scrolled to the bottom

Answer 2

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;
  }
});

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