Je voudrais créer un div, qui est situé sous un bloc de contenu mais qui, une fois que la page a été suffisamment défilée pour entrer en contact avec sa limite supérieure, devient fixe et défile avec la page.
305
Je voudrais créer un div, qui est situé sous un bloc de contenu mais qui, une fois que la page a été suffisamment défilée pour entrer en contact avec sa limite supérieure, devient fixe et défile avec la page.
position: sticky; top:0;
fonctionne dans la plupart des navigateurs en janvier 2017.position: sticky;
chose est magique.Réponses:
Vous pouvez utiliser simplement CSS, en positionnant votre élément comme fixe :
Modifier: Vous devez avoir l'élément avec la position absolue, une fois que le décalage de défilement a atteint l'élément, il doit être changé en fixe et la position supérieure doit être définie sur zéro.
Vous pouvez détecter le décalage de défilement supérieur du document avec la fonction scrollTop :
Lorsque le défilement atteint 200 décalage, l'élément bâton en haut de la fenêtre du navigateur, car est placé comme fixe.
la source
if ($(this).scrollTop() < 200 && $el.css('position') == 'fixed') { $('.fixedElement').css({'position': 'static', 'top': '0px'}); }
new example
lien que vous avez donné est tellement propre et clair que je ne le vois même pas! -_-Vous avez vu cet exemple sur la page de problème de Google Code et (tout récemment) sur la page de modification de Stack Overflow.
La réponse de CMS ne inverse pas le positionnement lorsque vous faites défiler vers le haut. Voici le code sans vergogne volé de Stack Overflow:
Et une simple démo en direct .
Une alternative naissante et sans script
position: sticky
est prise en charge par Chrome, Firefox et Safari. Voir l' article sur HTML5Rocks et démo , et les documents Mozilla .la source
offset
il a dû cesser d'accepter un objet comme entrée api.jquery.com/offset . @Eddie Votre modification devrait être sûre avec jQuery actuel.var d = $("#scroller-anchor").offset().top;
avecvar d = $("#sidebar").offset().top;
et de se débarrasser de la div changeurs ancre vide tous ensemble? Voici ma fourchette démontrant de quoi je parle.Depuis janvier 2017 et la sortie de Chrome 56, la plupart des navigateurs couramment utilisés prennent en charge la
position: sticky
propriété en CSS.fait l'affaire pour moi dans Firefox et Chrome.
Dans Safari, vous devez toujours utiliser
position: -webkit-sticky
.Les polyfills sont disponibles pour Internet Explorer et Edge; https://github.com/wilddeer/stickyfill semble être un bon.
la source
J'ai eu le même problème que vous et j'ai fini par créer un plugin jQuery pour en prendre soin. Il résout en fait tous les problèmes que les gens ont énumérés ici, et il ajoute également quelques fonctionnalités optionnelles.
Les options
https://github.com/donnyv/sticky-panel
démo: http://htmlpreview.github.io/?https://github.com/donnyv/sticky-panel/blob/master/jquery.stickyPanel/Main.htm
la source
code
// détache le panneau node.css ({"margin": 0, "left": nodeLeft, "top": newNodeTop, "position": "fixed", "width": node.width ()});code
Et voici comment sans jquery (MISE À JOUR: voir d'autres réponses où vous pouvez maintenant le faire avec CSS uniquement)
la source
C'est comme ça que je l'ai fait avec jquery. Tout cela a été bricolé à partir de diverses réponses sur le débordement de pile. Cette solution met en cache les sélecteurs pour des performances plus rapides et résout également le problème de "saut" lorsque le div collant devient collant.
Découvrez-le sur jsfiddle: http://jsfiddle.net/HQS8s/
CSS:
JS:
la source
Voici une autre option:
JAVASCRIPT
Vous
#myElementToStick
devriez commencer par laposition:absolute
propriété CSS.la source
Comme l'ont dit Josh Lee et Colin 't Hart , vous pouvez éventuellement utiliser simplement l'
position: sticky; top: 0;
application à la div que vous souhaitez faire défiler ...De plus, la seule chose que vous aurez à faire est de la copier en haut de votre page ou de la formater pour qu'elle tienne dans une feuille CSS externe:
Remplacez simplement
#sticky_div's_name_here
par le nom de votre div, c'est-à-dire que si votre div était<div id="example">
vous mettriez#example { position: sticky; top: 0; }
.la source
Ma solution est un peu détaillée, mais elle gère le positionnement variable à partir du bord gauche pour les mises en page centrées.
la source
Voici une autre version à essayer pour ceux qui ont des problèmes avec les autres. Il rassemble les techniques discutées dans cette question en double et génère dynamiquement les DIV d'assistance nécessaires afin qu'aucun HTML supplémentaire ne soit nécessaire.
CSS:
JQuery:
Pour rendre un élément collant, faites:
Lorsque l'élément devient collant, le code gère la position du contenu restant pour l'empêcher de sauter dans l'espace laissé par l'élément collant. Il ramène également l'élément collant à sa position non collante d'origine lors du défilement au-dessus de lui.
la source
Voici une version étendue de la réponse de Josh Lee. Si vous voulez que le div soit sur la barre latérale à droite et flotte dans une plage (c'est-à-dire, vous devez spécifier les positions d'ancrage supérieure et inférieure). Il corrige également un bogue lorsque vous le visualisez sur des appareils mobiles (vous devez vérifier la position du défilement vers la gauche, sinon le div se déplacera hors de l'écran).
la source
Je suis tombé sur cela en cherchant la même chose. Je sais que c'est une vieille question, mais j'ai pensé offrir une réponse plus récente.
Scrollorama a une fonction «pin it» qui est exactement ce que je cherchais.
http://johnpolacek.github.io/scrollorama/
la source
Les informations fournies pour répondre à cette autre question peuvent vous être utiles, Evan:
Vérifiez si l'élément est visible après le défilement
Vous souhaitez essentiellement modifier le style de l'élément pour le définir sur fixe uniquement après avoir vérifié que la valeur document.body.scrollTop est égale ou supérieure à la partie supérieure de votre élément.
la source
La réponse acceptée fonctionne mais ne revient pas à la position précédente si vous faites défiler au-dessus d'elle. Il est toujours collé au sommet après y avoir été placé.
La réponse de Jleedev devrait fonctionner, mais je n'ai pas réussi à la faire fonctionner. Sa page d'exemple ne fonctionnait pas non plus (pour moi).
la source
Vous pouvez ajouter 3 lignes supplémentaires, donc lorsque l'utilisateur fait défiler vers le haut, le div restera sur son ancien emplacement:
Voici le code:
la source
J'ai des liens configurés dans un div, c'est donc une liste verticale de liens de lettres et de chiffres.
J'ai ensuite configuré cette fonction jQuery pratique pour enregistrer la position chargée, puis changer la position à fixe lors du défilement au-delà de cette position.
REMARQUE: cela ne fonctionne que si les liens sont visibles au chargement de la page !!
la source
J'ai utilisé une partie du travail ci-dessus pour créer cette technologie. Je l'ai un peu amélioré et j'ai pensé partager mon travail. J'espère que cela t'aides.
Code jsfuddle
C'est un peu plus dynamique d'une façon de faire le défilement. Cela nécessite un peu de travail et je vais à un moment donné transformer cela en un plug-in, mais c'est ce que j'ai trouvé après une heure de travail.
la source
En javascript, vous pouvez faire:
la source
Pas une solution exacte mais une excellente alternative à considérer
cette barre de défilement CSS uniquement en haut de l'écran . Résolu tout le problème avec SEULEMENT CSS , AUCUN JavaScript, AUCUN JQuery, aucun travail de cerveau ( lol ).
Profitez de mon violon : D tous les codes y sont inclus :)
CSS
Mettez le contenu assez longtemps pour que vous puissiez voir l'effet ici :) Oh, et la référence est là aussi, car il mérite son crédit
CSS UNIQUEMENT Barre de défilement en haut de l'écran
la source
Voici un exemple qui utilise le plugin jquery-visible: http://jsfiddle.net/711p4em4/ .
HTML:
CSS:
JS (inclut le plugin jquery-visible):
la source
collant jusqu'à ce que le pied de page frappe la div:
la source