Comment afficher div quand l'utilisateur atteint le bas de la page?

Lorsque l'utilisateur fait défiler vers le bas de la page, je veux montrer une certaine div, avec jQuery bien sûr. Et si l'utilisateur fait défiler vers le haut, div fondu. Comment calculer viewport (ou quel que soit le nom à droite) :)Comment afficher div quand l'utilisateur atteint le bas de la page?

Merci

Source

2010-05-04 Kenan

parlez-vous d'un div qui aura une position: fixe; ou un div qui est juste au bas du contenu? – codedude

il sera position fixe au bas de la page, peut-être "bas: 50px" – Kenan

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 devrez ajouter les marges supérieure et inférieure au $('body').height().

Source

2010-05-04 20:10:33 BalusC

Merci, mais cela ne fonctionne pas :( – Kenan

Avez-vous vérifié les marges? J'ai mis à jour la réponse pour inclure un SSCCE – BalusC

Oui, marge est 0, J'utilise la fonction de réinitialisation CSS, et je suis aussi en train d'utiliser jQuery 1.3.2? – Kenan

$ (document). scrollTop() devrait vous donner la position de la barre de défilement. vous vérifiez cela par rapport à la hauteur du document. puis fondu dans ou hors de la div.

Source

2010-05-04 19:52:16

Voici une petite modification sur le code du BalusC si vous voulez afficher un div pas un 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>

Source

2012-03-20 03:18:21

Salut. Disons qu'au lieu de "body" j'utilise un ID div et si je veux que le "hi" apparaisse quand je suis à 80% de la div défilée, par exemple? :) Votez pour payer une bonne réponse :) –

Vous pouvez utiliser les éléments suivants:

$(window).scroll(function() { 
    if ($(document).height() <= ($(window).height() + $(window).scrollTop())) { 
     //Bottom Reached 
    } 
});

-je utiliser cela parce que j'ai

body { 
    height:100%; 
}

Hope this helps

Source

2013-03-21 20:17:05

Merci, j'étais exactement dans le même cas. Votre solution a fonctionné pour moi! – Adrien

@Adrien De rien mon ami. Heureux d'avoir pu aider :) –

Comment afficher div quand l'utilisateur atteint le bas de la page?

Répondre

Questions connexes