当用户滚动到页面末尾时如何显示div？

Question

http://codepen.io/BrianDGLS/pen/yNBrgR

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.

Answer 1

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.

Answer 2

It could be something like:

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

Answer 3

当<div id="show">在客户端的视口中可见时，您需要触发Javascript函数，因为您可以使用插件

Answer 4

try below code

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