title: How to make a fixed menu/sidebar while using position:relative?
body: <p>I want to make an relative div that can be scrolled down until it reaches the top of the page, then the div should be fixed and stay on top until page is scrolled up again. Perhaps I should use jquery?!</p>
  
  <p>These are my code. <strong>The div called: .sidebar is the one I want to have fixed while scrolling!</strong> I have shown more divs and css styles to show you guys how it is. This is how it looks like: <a href="http://imagizer.imageshack.us/a/img841/5807/pjpj.png" rel="nofollow">http://imagizer.imageshack.us/a/img841/5807/pjpj.png</a> </p>
  
  <pre><code>&lt;div id="header" class="container"&gt;
  
  &lt;div id="navbar"&gt;
  
  
          &lt;div id="menu"&gt;
              &lt;ul&gt;&lt;h2&gt;
                  &lt;li&gt;&lt;a href="#" accesskey="3" title="contact"&gt;contact&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;img src="images/icon_triangle.jpg"&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="portfolio.html" accesskey="4" title="portfolio"&gt;portfolio&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;img src="images/icon_triangle.jpg"&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#" accesskey="5" title="about"&gt;about&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;img src="images/icon_triangle.jpg"&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="index.html" accesskey="6" title="home"&gt;home&lt;/a&gt;&lt;/li&gt;
                  &lt;/h2&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;div id="content"&gt;
  
  &lt;h7&gt;HappyDays&lt;/h7&gt;&lt;br /&gt;&lt;br /&gt;
  &lt;h5&gt;Webdesign&lt;/h5&gt;
  &lt;h4&gt;Made in Photo&lt;/h4&gt;&lt;br /&gt;&lt;br /&gt;
  &lt;h4&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tempor mattis ornare. Ut semper sem nec justo adipiscing ullamcorper. Nullam sit amet lacus et arcu vestibulum volutpat. Cras mi lectus, consequat quis pretium eu, sodales vitae velit. Donec imperdiet quis urna at egestas. Curabitur in libero commodo est hendrerit condimentum. In hac habitasse platea dictumst. Ut posuere, purus nec convallis lobortis, neque est ornare felis, ut iaculis nulla erat sed diam. Cras non leo libero.&lt;/p&gt;&lt;/h4&gt;&lt;br /&gt;&lt;br /&gt;  
  
  
  &lt;a rel="prettyPhoto" href="images/cocktail.jpg"&gt;&lt;img src="images/images/cocktail.jpg" style="width: 50%; float: left;"&gt;&lt;/a&gt;
  
  
  
  &lt;/div&gt;
  
  
  
  &lt;div class="sidebar"&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="portfolio.html" accesskey="3"&gt;&lt;img src="images/icon_triangle_all.jpg" width="80%"&gt;&lt;br /&gt;&lt;br /&gt;&lt;h6&gt;All&lt;/h6&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#" accesskey="4" title="portfolio"&gt;&lt;img src="images/icon_triangle_previous.jpg"  width="30%"&gt;&lt;br /&gt;&lt;br /&gt;&lt;h6&gt;Previous&lt;/h6&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#" accesskey="5"&gt;&lt;img src="images/icon_triangle_next.jpg"  width="50%"&gt;&lt;br /&gt;&lt;br /&gt;&lt;h6&gt;Next&lt;/h6&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
  &lt;div class="line2"&gt;&lt;/div&gt;
   &lt;/div&gt;   
  </code></pre>
  
  <p><strong>NOW THE CSS!</strong></p>
  
  <pre><code>#menu
      {
      height: 50px;
      padding: 0 13em;
      position: fixed;
      top: 0.5%;
      width: 50%;
      word-spacing:30px;
      z-index:999;
      }
  
  
  
  
  #navbar 
      {
          background:#fff;
          height:5%;
          width:100%;
          bottom: auto !important;
          margin: 0 !important;
          position: fixed !important;
          top: 0;
          border-bottom: 1px solid #a7a7a7;
          z-index:999;
  
          }
   #content {
      background: none repeat scroll 0 0 #FFFFFF;
     position: relative;  
      font-size: 14px;
      line-height: 25px;
      margin-left:auto;
      margin-right:auto;
      text-align: center;
       width: 66.667%;
  
   }
  
  .sidebar    
      {
      float:right;
      position:relative;
      width: 50%;
      z-index:999;    
      text-decoration:none;
  
  
      }
  
      .sidebar li {
  
      display: inline-block;
      list-style-type: none;
       -webkit-transition:all .3s ease-in-out;
      -moz-transition:all .3s ease-in-out;
      -ms-transition:all .3s ease-in-out;
      -o-transition:all .3s ease-in-out;
      transition:all .3s ease-in-out;
  
      }
  </code></pre>