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

I ha开发者_StackOverflowve 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?

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

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