Box Pop-up auf Bildlauf

Question

Ich versuche herauszufinden, wie ich am Ende einer Seite, die gut scrollt, wenn Sie den unteren Rand der Seite erreichen, über ein div hinzufügen. Ich möchte, dass es versteckt bleibt, bis ich dieses div am unteren Rand erreiche, und ich möchte, dass es schön nach oben scrollt, wenn ich es erreiche, und schön zurück scrollen, wenn ich zurück scrolle.

Dies ist, was ich beginne mit:

$(window).scroll(function(){ 
 
    if($(document).scrollTop() > ) { 
 
     $('#signup').show(); 
 
    } else { 
 
     $('#signup').hide(); 
 
    } 
 
});

html { height: 2000px; } /* create a scrollbar for demo purposes */ 
 

 
#signup { 
 
    position: fixed; 
 
    top: 200px; 
 
    right: 50px; 
 
    display: none; 
 
    background-color:purple; 
 
}

<div id="signup">Sign up!</div>

aber ich kann scheinen nicht wirklich, um herauszufinden, wohin man von hier zu gehen, und das ist nicht einmal viel zu tun .

TIA

Answer 1

Sie müssen prüfen, ob die scrollvalue + window height die gleiche der document sind;

prüfen dieses Beispiel Snippet:

$(window).scroll(function() { 
 
    if ($(window).scrollTop() + $(window).height() == $(document).height()) { 
 
    $('#signup').addClass('show') 
 
    } else { 
 
    $('#signup').removeClass('show') 
 
    } 
 
});

body { 
 
    height: 1000px; 
 
} 
 
/* create a scrollbar for demo purposes */ 
 

 
#signup { 
 
    position: fixed; 
 
    z-index:100; 
 
    width: 100%; 
 
    bottom: -50px; 
 
    height: 50px; 
 
    left: 0; 
 
    background-color: purple; 
 
    transition: bottom .5s linear; 
 
    color: white; 
 
    font-size: 2em; 
 
    text-align: center 
 
} 
 
#signup.show { 
 
    bottom: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="signup">Sign up!</div>