How to show a div when the user scrolls to the end of the page?

Question

This is what I am currently using which allows the user to track where he is on the page.

What would I have to do to show a div when the user reaches the bottom of the page? And continue to show it until he hits refresh

#show {display: none}

<div id="show">
<p>Hello</p>
<p>World!</p>
</div>

Show the div '#show' when the user reaches the bottom of the page and continue to show it for as long as he stays on the page.

Take a look here http://stackoverflow.com/questions/10059888/detect-when-scroll-reaches-the-bottom-of-the-page-without-jquery — Henrique Arthur, Apr 21 '15 at 17:35
scrolled to bottom: http://stackoverflow.com/questions/3898130/how-to-check-if-a-user-has-scrolled-to-the-bottom im curious if you can persist the div with only client side (you can do it with cookies I'm guessing) — Symba, Apr 21 '15 at 17:43

score 2 · Accepted Answer · answered Apr 21 '15 at 17:37

Using a convention that mirrors the sample JS code:

        $(window).scroll(function() {
          var wintop = $(window).scrollTop(),
            docheight = $(document).height(),
            winheight = $(window).height(),
            scrolled = (wintop / (docheight - winheight)) * 100;

          if (scrolled >= 100) {
            $(yourDiv).show();
          }
        });

The computation of the scroll percentage is straight from the link you provided and the condition just checks if you've reached 100% of the page (minus current window size).

You could also change 100 to be whatever percentage if you want to load the div before the user reaches the absolute bottom.

kosmos · Answer 2 · 2015-04-21T17:56:34.343

1

It could be something like:

$(window).on('scroll', function(){
    var op = $(window).scrollTop() + $(window).height();
    if( op >= $(document).height() ) $("#show").show();
});

edited Apr 21 '15 at 17:56

answered Apr 21 '15 at 17:35

kosmos

4,253
1
18
36

The bottom of the page is not `100`, this wouldn't work as expected. – Henrique Arthur Apr 21 '15 at 17:36
`$(window).height()` does not result in the height of the document. `$(document).height()` does. – Jeff Noel Apr 21 '15 at 17:41
Yes, you are right, I answered too fast. @arcyqwerty has a good answer. Anyway I'll change mine. Thanks for advice. – kosmos Apr 21 '15 at 17:45

score 0 · Answer 3 · answered Apr 21 '15 at 17:36

0

You need to trigger a Javascript function when the <div id="show"> is visible in the client's viewport, for that you can use a plugin

answered Apr 21 '15 at 17:36

odedta

2,430
4
24
51

score 0 · Answer 4 · answered Apr 21 '15 at 17:39

0

try below code

var show=false;
$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() == $(document).height() || show==false) {
       $("#show").show();
       show=true;
   }
});

answered Apr 21 '15 at 17:39

nirmal

2,143
1
19
29

How to show a div when the user scrolls to the end of the page?

4 Answers4