开发者

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

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜