Comment afficher div lorsque le fond de la portée de l'utilisateur de la page?
Question
Lorsque l'utilisateur fait défiler au bas de la page Je veux montrer une div, avec jQuery bien sûr. Et si l'utilisateur fait défiler dos à haut il, div fondu. Alors, comment calculer viewport (ou quel que soit le nom à droite):)
Merci
La solution
Cela doit vous aider à démarrer:
<!doctype html>
<html lang="en">
<head>
<title>SO question 2768264</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function() {
$(window).scroll(function() {
if ($('body').height() <= ($(window).height() + $(window).scrollTop())) {
alert('Bottom reached!');
}
});
});
</script>
<style>
body { margin: 0; }
</style>
</head>
<body>
<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p
<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p
<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p
<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p
</body>
</html>
Cela suppose que body
a une margin
de 0
. Sinon vous aurez besoin d'ajouter les marges supérieure et inférieure à la $('body').height()
.
Autres conseils
Vous pouvez utiliser ce qui suit:
$(window).scroll(function() {
if ($(document).height() <= ($(window).height() + $(window).scrollTop())) {
//Bottom Reached
}
});
Je l'utilise parce que j'ai
body {
height:100%;
}
Hope this helps
Voici une petite modification sur le code du BalusC si vous voulez afficher un div pas popup javascript:
<head>
<title>SO question 2768264</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function() {
$(window).scroll(function() {
if ($("body").height() <= ($(window).height() + $(window).scrollTop())) {
$("#hi").css("display","block");
}else {
$("#hi").css("display","none");
}
});
});
</script>
<style>
body { margin: 0; }
#hi {
background: red; color: #FFF; position: fixed; bottom: 0px; right: 0px; display: none;
}
</style>
</head>
<body>
<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p
<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p
<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p
<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p
<div id="hi">HIIIIIIIIIIII</div>
</body>
$ (document). scrollTop () devrait vous donner la position de la barre de défilement. vous vérifiez que contre la hauteur du document. puis fondu ou le div.