Comment faire un menu flottant qui reste en place jusqu'à ce que vous faites défiler dessus

Question

Je veux faire un menu qui est corrigé. Mais je veux que ce soit corrigé seulement si j'ai défilé devant. En fait, je le veux comme le "comment .." menu sur la question poser une partie de stackoverflow. Je pensais que vous avez besoin de jquery pour faire de telles choses, mais je ne sais pas grand-chose à propos de jQuery. J'utilise ce code pour le menu et je veux que cela flotter. Ainsi, l'ensemble div sidebar doit flotter .:

<div id="sidebar"> 
    <div> 
     <h2 class="title">Sites</h2> 
      <ul> 
       <li><a>first li</a></li> 
       <li><a>second li</a></li> 
       <li><a>third li</a></li> 
     </ul> 
    </div> 
    <div> 
     <h2 class="title">Sites</h2> 
      <ul> 
       <li><a>first li</a></li> 
       <li><a>second li</a></li> 
       <li><a>third li</a></li> 
      </ul> 
    </div> 
</div> 

Je sais comment je peux le laisser flotter en haut de la page, mais je le veux flotter dans un emballage.

J'espère que vous pouvez m'aider.

EDIT

maintenant j'ai le menu flottant avec ce code:

<script type="text/javascript"> 
    $(function() { 
     var offset = $("#sidebar").offset(); 
     var topPadding = 15; 
     $(window).scroll(function() { 
      if ($(window).scrollTop() > offset.top) { 
       $("#sidebar").stop().animate({ 
        marginTop: $(window).scrollTop() - offset.top + topPadding 
       }); 
      } else { 
       $("#sidebar").stop().animate({ 
        marginTop: 0 
       }); 
      }; 
     }); 
    }); 
</script> 

Mais il y a un effet de rebond vraiment gênant quand je défiler vers le bas. Y a-t-il un moyen de supprimer cet effet?

Answer 1

En bref: Vous liez à l'événement scroll de la fenêtre et vérifier si le courant scrollTop (distance en pixels à partir du haut de la page au pixel actuellement en haut de votre fenêtre) est plus grande que la distance entre le haut de la page et le haut de votre barre latérale.
Si cela est indiqué, vous définissez la différence en tant que marginTop pour que la barre latérale reste dans la zone visible.

Voir à http://css-tricks.com/scrollfollow-sidebar/ pour un exemple et des informations supplémentaires.