title: How to make floating menu which stays in place until you scroll over it
body: <p>I want to make a menu that is fixed. But I want it only to be fixed if i've scrolled past it.
  Actually I want it just like the "how to .." menu on the question ask part of stackoverflow. <a href="https://stackoverflow.com/questions/ask">https://stackoverflow.com/questions/ask</a></p>
  
  <p>I thought you need jquery to do such things, but i really don't know much about jquery.</p>
  
  <p>I use this code for the menu and i want that to  float. So the whole sidebar div needs to float.:</p>
  
  <pre><code> &lt;div id="sidebar"&gt;
       &lt;div&gt;
          &lt;h2 class="title"&gt;Sites&lt;/h2&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a&gt;first li&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a&gt;second li&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a&gt;third li&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;   
      &lt;/div&gt;
      &lt;div&gt;
          &lt;h2 class="title"&gt;Sites&lt;/h2&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a&gt;first li&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a&gt;second li&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a&gt;third li&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;   
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I know how I can let it float to the top of the page, but i want it to float in a wrapper.</p>
  
  <p>I hope you guys can help me.</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>now i have the floating menu with this code:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(function() {
          var offset = $("#sidebar").offset();
          var topPadding = 15;
          $(window).scroll(function() {
              if ($(window).scrollTop() &gt; offset.top) {
                  $("#sidebar").stop().animate({
                      marginTop: $(window).scrollTop() - offset.top + topPadding
                  });
              } else {
                  $("#sidebar").stop().animate({
                      marginTop: 0
                  });
              };
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>But there is a really annoying bounce effect when I scroll down. Is there a way to remove that effect?</p>