Comment faire glisser un élément avec la fenêtre pendant le défilement?

Question

J'ai cherché Google pour cela, mais je dois utiliser les mauvais mots-clés.

Fondamentalement, je veux utiliser l'effet que Magento et maintenant Stack Overflow utilise. C'est-à-dire, il y a un élément dans une colonne, et quand vous faites défiler vers le bas, il colle en haut de la fenêtre. Et une fois de nouveau défilé, il revient dans le flux de la page normale.

Cette Question est une bonne page par exemple. Faites défiler vers le bas et regarder l'élément "Comment formater" descendre (pourrait avoir besoin de rendre votre fenêtre plus petite si vous avez un grand écran pour voir l'effet). J'ai remarqué qu'il est position: fixed dans le CSS. Le JavaScript est cependant obscurci.

Quelle est la manière la plus simple d'obtenir cet effet? Y a-t-il un plugin jQuery disponible?

Answer 1

Voici un article qui devrait aider: http://www.wduffy.co.uk/blog/keep-element-in-view-while-scrolling-using-jquery/comment-page-1/

Answer 2

J'ai remarqué google le faire dans certains endroits, comme ici http://news.google.com/nwshp?hl=en (la barre de navigation latérale gauche). D'après ce que je peux dire, ils vérifient la position sur la page, puis définissent l'élément à une position fixe une fois que la page est suffisamment défilée pour que l'élément commence à défiler hors de l'écran. Il ressemble à l'autre méthode, l'utilisation de jQuery pour définir la marge supérieure permettra à l'élément de rester en arrière et d'être agité (si vous n'utilisez pas d'animation) puisque le javascript doit continuer à positionner l'élément.

Voici un exemple dans Ext, cela aiderait probablement beaucoup si je n'avais pas le select dans le gestionnaire d'événements, mais cela fonctionne.

Ext.fly(document).on("scroll", function(e,t,o){ 
    Ext.select(".pinnable").each(function(el,c,idx){ 
     var y = window.scrollY; 
     if(!el.hasClass("pinned")){ 
      var ypos = el.getY(); 
      if(y>ypos){ 
       el.addClass("pinned"); 
       el.set({ 
        originalY:ypos 
       }); 
      }     
     } else { 
      var origy = el.getAttribute("originalY"); 
      if(origy && y<origy){ 
       el.removeClass("pinned") 
      } 
     } 
    });  
});