Avoir une div qui s'accrochent en haut de l'écran si défile vers le bas passé, il

Question

J'ai un div qui, lors de mon premier chargement de la page est à propos de 100px de haut (il y a des boutons etc. pour la page).

Lorsqu'un utilisateur fait défiler devant lui, je voudrais la div pour "suivre" l'utilisateur qu'il accorde à la partie supérieure de l'écran. Lorsque l'utilisateur revient sur le haut de la page, je veux revenir 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
---------                    ---------

Answer 1

Le truc, c'est que vous avez à le définir comme position:fixe, mais seulement après que l'utilisateur est déjà passé.

Cela se fait avec quelque chose comme cela, fixer un gestionnaire de la fenêtre.événement 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);
    });

Ceci ajoute simplement un sticky classe CSS lorsque la page est déjà passé, et supprime la classe quand il est de retour.

Et la classe CSS ressemble à ceci

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

EDIT - Modifié le code de cache jQuery objets, plus vite maintenant.

Answer 2

Le truc pour faire de l'infini de la réponse de travailler sans le scintillement est de mettre le défilement de vérifier sur un autre div, puis celui que vous voulez avoir corrigé.

Dérivé du code viixii.com utilise j'ai utilisé 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 qu'une fois le sticky-ancre est atteint et ne sera donc pas la suppression et l'ajout d'un".collant en classe sur chaque événement scroll.

Maintenant, il ajoute le collant de la classe quand les collants-ancre atteint le sommet et l'enlève une fois le sticky-ancre de retour dans la vue.

Il suffit de placer une div vide avec une classe agissant comme un point d'ancrage juste au-dessus de l'élément que vous souhaitez avoir corrigé.

Comme suit:

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

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

Answer 3

Vous devriez essayer les waypoints plugin jQuery.

http://imakewebthings.github.com/jquery-waypoints/sticky-elements/

Je pense que c'est exactement ce que vous voulez, et sans scintillement. À partir de la mémoire, cependant, je ne pense pas que cela a bien fonctionné dans le navigateur Safari Mobile (YMMV).

Un bon exemple de cela, c'était sur le New York Times récemment:

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

La zone de graphique dans la page n'a pas de défilement en haut de la page.

Answer 4

Il y avait une précédente question aujourd'hui (pas de réponses), qui a donné un bon exemple de cette fonctionnalité. Vous pouvez vérifier le code source correspondant pour les détails (de la recherche pour "barre d'outils"), mais, fondamentalement, ils utilisent une combinaison de webdestroya solution et un peu de JavaScript:

1. Le chargement de la Page, et l'élément est en position statique
2. Sur le parchemin, la position est mesurée, et si l'élément est en position statique et il est hors de la page, alors l'élément est retourné à la position: fixed.

Je voudrais vous recommandons de vérifier le précitées du code source si, parce qu'ils ne gèrent certains "pièges" que vous ne pourriez pas immédiatement penser, comme le réglage de la position de défilement en cliquant sur les liens d'ancrage.

Answer 5

J'ai créé un plugin jQuery pour cela. Aimerait recevoir des commentaires comme c'est mon premier. https://github.com/dubroe/sticky-div