L'utilisateur entre dans le site.
À ce stade, la DIV est au milieu de la page.
Comme il fait défiler la page, la Div commence d'abord à se déplacer vers le haut, mais une fois qu'il frappe le haut, il y reste.
Alors qu'il fait défiler davantage la page, la div reste près du sommet, toujours visible à l'utilisateur.
Comme il fait défiler la page jusqu'au sommet, la DIV reste une fois de retour en position où elle était à l'origine.
3 Réponses :
Vous pouvez accrocher l'événement FWIW, je ferais très attention à ce que ce soit. Habituellement, lorsqu'un utilisateur fait défiler, c'est parce qu'ils veulent regarder un contenu différent de celui de la page. Personnellement, je déteste des boîtes qui me suivent sur des pages Web. :-) Mais cela ne veut pas dire qu'il n'y a pas une bonne raison de le faire à l'occasion. P> Exemple très de base ( Copie en direct ): P> p> défilement code> sur la fenêtre code> objet code>. Lors du traitement de l'événement, examinez la position de défilement verticale de la fenêtre / document (voir Cette réponse sur la façon de faire cela). Utilisez un positionnement absolu pour votre div code> et mettez à jour son top code> comme coordonnée si nécessaire.
<div id='box'>I'm the box</div>
<div style="height: 1000px"></div>
Y a-t-il un moyen de faire arrêter la boîte après le défilement à un moment donné?
@Andersongreen: Bien sûr, il suffit de limiter la valeur de défilement dans le gestionnaire olfroll .
J'ai essayé de le faire faire défiler à 900 pixels, et il semble fonctionner lorsque j'ajouterai ce code au gestionnaire Onscroll: Si (Scroll> 500) {Scroll = 500; }
Ceci est une ancienne implémentation de votre fonctionnalité souhaitée, que j'ai utilisée. C'est l'un des premiers scripts que j'ai écrites, alors JS & JQuery connaissant que les gens seront probablement vomissants. Je l'ai écrit principalement en raison de tous les exemples que j'ai trouvés en ligne ont été centrés sur le déplacement de la DIV plutôt que de la fixer à fixer et d'ajouter progressivement à la marge supérieure de la boîte entraînait un mouvement vraiment agité.
Changements fondamentaux à une modification fixe à mesure que l'élément spécifié est une marge définie personnalisée du haut de la fenêtre du navigateur et s'arrête en descendant une fois qu'il frappe un décalage personnalisé avant notre pied de page (nous voulions contraindre le suivi pour ne pas passer à l'avant de ne pas passer à notre espace de la barre latérale).
J'espère que c'est d'une utilisation, et si un plugin pour gérer cela de nos jours existe, vous seriez probablement mieux l'utiliser.
Sauf que le fait qu'une implémentation d'experts, peut-être publiée sous forme de plugin serait à la fois plus optimisée et moins sujette d'erreur, et plus facile à connecter dans différents types de sites Web :)
Comme vous pouvez le constater que d'autres personnes ont fourni des scripts prêts, mais si vous voulez vous faire une vous-même (perte de temps) [ou vous voudrez peut-être apprendre] .. Voici un bon point pour commencer:
var hscroll = (document.all ? document.scrollLeft : window.pageXOffset); var vscroll = (document.all ? document.scrollTop : window.pageYOffset);