How to hide a div at the end of the vertical scroll

Question

I have a div at the bottom of the screen in fixed position with an arrow inside. How do I hide the div when the user has scrolled to the bottom of the page?

Please post your code, with samples of what have you have tried already. — BenM, Jan 31 '13 at 08:35
I think it's already answered: http://stackoverflow.com/questions/3898130/how-to-check-if-a-user-has-scrolled-to-the-bottom, :-) — German Latorre, Jan 31 '13 at 08:42

score 3 · Answer 1 · answered Jan 31 '13 at 08:38

3

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() == $(document).height()) {
       $('div').hide();
   }
});

answered Jan 31 '13 at 08:38

Chris Visser

1,607
12
24

score 2 · Answer 2 · answered Jan 31 '13 at 08:37

2

Try this:

var vericalscroll= document.height - (window.pageYOffset + window.innerHeight);

if your vericalscroll is 0,it means you have reched at the end of vertical scroll.

answered Jan 31 '13 at 08:37

Milind Anantwar

81,290
25
94
125

score 0 · Answer 3 · edited Sep 23 '17 at 05:29

0

You can try jQuery for this:

var max_scroll = 500;
$(document).scroll(function(){
  if($(this).scrollTop() >= max_scroll)
  {
      $('#my_div').fadeOut();
  }
});

where my_div is your div name and max_scroll is the scrolled position.

edited Sep 23 '17 at 05:29

Pang

9,564
146
81
122

answered Jan 31 '13 at 08:39

Rahul

395
1
15

How to hide a div at the end of the vertical scroll

3 Answers3