Comment faire pour afficher la div lorsque l'utilisateur atteindre le fond de la page?

Lorsque l'utilisateur fait défiler vers le bas de la page, je veux montrer certains div, avec jQuery, bien sûr. Et si l'utilisateur fait défiler en arrière pour il top, div fade out.
Alors, comment calculer fenêtre d'affichage (ou de ce qu'est le bon nom) 🙂

Grâce

parlez-vous une div qui auront une position:fixed; ou un div qui est juste au fond du contenu?
il sera en position fixe au bas de la page, peut-être "bottom:50px"

OriginalL'auteur Kenan | 2010-05-04

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 un margin de 0. Autre chose que vous aurez besoin d'ajouter la marge supérieure et inférieure de la $('body').height().

Merci mais cela ne marche pas 🙁
Avez-vous vérifier les marges? J'ai mis à jour la réponse à inclure une SSCCE.
Oui, la marge est de 0, je suis en utilisant le CSS reset. Et aussi Im en utilisant jQuery 1.3.2?
Hmm, vous avez raison, il ne fonctionne pas dans Firefox (Editplus ici a IE7 comme builtin navigateur). La fenêtre est en fait plus élevé dans les FF. Je vais étudier si c'est normal. Mise à jour: drôle, body.onscroll n'est pas pris en charge dans FF.
Vous pourriez mieux utiliser $(document).height() au lieu de $('body').height(). Le corps me fit du tort à la hauteur dans mon design.

OriginalL'auteur BalusC

6

Vous pouvez utiliser les éléments suivants:
```
$(window).scroll(function() {
    if ($(document).height() <= ($(window).height() + $(window).scrollTop())) {
        //Bottom Reached
    }
});
```
Je l'utiliser parce que j'ai
```
body {
    height:100%;
}
```
Espère que cette aide

Merci à vous, j'ai été exactement dans le même cas. Votre solution a fonctionné pour moi !
Vous êtes le bienvenu, mon ami. Content d'avoir pu aider 🙂

OriginalL'auteur David Passmore

Voici un petit edit sur le BalusC du code si vous souhaitez afficher un div pas un javascript popup:

<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>

Salut. Disons qu'au lieu de "corps", je suis en utilisant un div ID et que si je veux que le "salut" quand je suis à 80% de la volutes div, par exemple? 🙂 De voter paiera une bonne réponse 🙂

OriginalL'auteur Hossam Mourad

2

$(document).scrollTop() devrait vous donner la position de la barre de défilement.
vous vérifiez que par rapport à la hauteur. ensuite fondu en entrée ou en dehors de la div.

OriginalL'auteur Funky Dude

Vous devez vous connecter pour publier un commentaire.