web-dev-qa-db-fra.com

Accrocher une div en haut de l'écran si on la fait défiler

J'ai un div qui, lorsque ma page est chargée pour la première fois, est à environ 100 px du haut (il contient des boutons, etc. pour la page).

Lorsqu'un utilisateur passe devant, je souhaite que la div "suive" l'utilisateur en ce sens qu'elle se fixe en haut de l'écran. Lorsque l'utilisateur revient en haut de la page, je le veux dans sa position d'origine.

Visualization - xxxxx is the div:

Default (page load)          User vertically scrolled well past it
---------                    ---------
|       |                    |xxxxxxx| < after div reaches top of screen when
|xxxxxxx|                    |       |   page is scrolled vertically, it stays
|       |                    |       |   there
---------                    ---------
javascripthtmlcss
98
Alex

Le truc, c'est que vous devez le définir comme position: fixé, mais seulement après que l'utilisateur l'ait fait défiler.

Ceci est fait avec quelque chose comme ceci, attachant un gestionnaire à l'événement window.scroll

   // Cache selectors outside callback for performance. 
   var $window = $(window),
       $stickyEl = $('#the-sticky-div'),
       elTop = $stickyEl.offset().top;

   $window.scroll(function() {
        $stickyEl.toggleClass('sticky', $window.scrollTop() > elTop);
    });

Cela ajoute simplement une classe CSS sticky lorsque la page est passée au-dessus de celle-ci, et supprime la classe lors de la sauvegarde.

Et la classe CSS ressemble à ceci

  #the-sticky-div.sticky {
     position: fixed;
     top: 0;
  }

EDIT- Code modifié pour mettre en cache les objets jQuery, plus rapidement maintenant.

142
adamJLev

L'astuce pour que la réponse de l'infini fonctionne sans scintillement est de placer le contrôle de défilement sur un autre div que celui que vous souhaitez corriger.

Dérivé du code viixii.com utilise j'ai fini par utiliser ceci:

function sticky_relocate() {
    var window_top = $(window).scrollTop();
    var div_top = $('#sticky-anchor').offset().top;
    if (window_top > div_top)
        $('#sticky-element').addClass('sticky');
    else
        $('#sticky-element').removeClass('sticky');
}

$(function() {
    $(window).scroll(sticky_relocate);
    sticky_relocate();
});

De cette façon, la fonction n'est appelée que lorsque le sticky-anchor est atteint et ne supprimera donc ni ne rajoutera la classe '.sticky' à chaque événement de défilement.

Maintenant, il ajoute la classe collante lorsque l’ancre adhésive atteint le sommet et l’enlève une fois que l’ancre adhésive revient à la vue.

Placez simplement une div vide avec une classe agissant comme une ancre juste au-dessus de l'élément que vous souhaitez corriger.

Ainsi:

<div id="sticky-anchor"></div>
<div id="sticky-element">Your sticky content</div>

Tout le crédit pour le code va à viixii.com

20
Rafvs

Vous devriez essayer le plugin jQuery de waypoints.

http://imakewebthings.com/waypoints/shortcuts/sticky-elements/

Je pense que cela fait exactement ce que vous voulez, et sans scintillement. De mémoire, cependant, je ne pense pas que cela a bien fonctionné dans Mobile Safari (YMMV).

Un bon exemple de cela était récemment dans le New York Times:

http://www.nytimes.com/interactive/2010/11/13/weekinreview/deficits-graphic.html

La boîte graphique de la page ne défile pas en haut de la page.

3
Michael Bamford

J'ai créé un plugin jQuery pour cela. J'adorerais avoir des retours car c'est mon premier. https://github.com/dubroe/sticky-div

2
user1376350

Il y avait un question précédente aujourd'hui (pas de réponse) qui a donné un bon exemple de cette fonctionnalité . Vous pouvez vérifier le code source pertinent pour plus de détails (recherchez "toolbar"), mais ils utilisent en fait une combinaison de la solution webdestroya et d'un peu de JavaScript:

  1. La page se charge et l'élément est position: static
  2. Au défilement, la position est mesurée et si l'élément est position: statique et qu'il est en dehors de la page, l'élément est basculé sur position: fixé.

Je recommanderais cependant de vérifier le code source susmentionné, car ils gèrent certains "pièges" auxquels vous pourriez ne pas penser immédiatement, tels que le réglage de la position du défilement lorsque vous cliquez sur des liens d'ancrage.

2
Andrew

Utilisation position:fixed; et mettez le top:0;left:0;right:0;height:100px; et vous devriez pouvoir le "coller" en haut de la page.

<div style="position:fixed;top:0;left:0;right:0;height:100px;">Some buttons</div>
0
Mitch Dempsey