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 retourne à He Top, div se fanez. Donc, comment calculer la fenêtre (ou tout ce qui est le bon nom) :)
merci
4 Réponses :
$ (document). ScrollTop () devrait vous donner la position de la barre de défilement. Vous vérifiez que contre la hauteur du document. puis s'estomper dans ou sur la DIV.
Ceci 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>
Avez-vous vérifié les marges? J'ai mis à jour la réponse à inclure une SSCCE.
Oui, la marge est 0, j'utilise la réinitialisation CSS. Et aussi im en utilisant jQuery 1.3.2?
Hmm, vous avez raison, cela n'a pas fonctionné dans Firefox (Editplus ici a IE7 en tant que navigateur intégré). La fenêtre est réellement plus élevée dans FF. Je vais enquêter si cela devrait être attendu. Mise à jour: drôle, corps.onscroll n'est pas pris en charge dans FF.
J'ai remplacé body.onscroll par fenêtre.onscroll et == par <= .
J'ai trouvé mal partagé, il devrait être: $ (fenêtre) .scroll non pas $ («corps») merci
Y a-t-il de toute façon montrer le contenu lorsque l'utilisateur atteint le bas-200px, par exemple. Donc pas exactement le bas, plutôt que 200px avant? Merci une fois de plus
Soustrayez la hauteur du corps avec cette valeur.
impressionnant! De ce code, il est possible de développer également quelque chose de similaire à celui sur Facebook ou Twitter. impressionnant! formidable :)
Vous pouvez mieux utiliser $ (document) .Height () au lieu de $ ("corps"). Hauteur () . Le corps m'a renvoyé la mauvaise hauteur de mon design.
Voici une petite édition sur le code de Baluscs Si vous souhaitez afficher une pop up 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>
Salut. Disons au lieu de "corps" que j'utilise un ID de div et que si je veux que le "salut" apparaisse quand je suis à 80% du défilement DIV, par exemple? :) Votez up paiera une bonne réponse :)
Vous pouvez utiliser ce qui suit:
body {
height:100%;
}
Merci, j'étais exactement dans le même cas. Votre solution a fonctionné pour moi!
@Adrien, vous êtes la bienvenue mon ami. Heureux d'avoir pu aider :)
Parlez-vous d'un DIV qui aura une position: fixe; ou un div qui est juste au bas du contenu?
Il sera une position fixe au bas de la page, peut-être "Bottom: 50px"