title: How to make sidebar fixed when scroll like sticky
body: <p>ok. i have a problem with my sidebar. i want make the left sidebar fixed and go up when i scroll down over "Hello, world ?" and the sidebar will go up like STICKY. i dont want use a plugin. i need some short code. it's only use for that. help me with jsfiddle. thank you</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>*/i want use javascript.../</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#header { clear:both; width: 100%; background-color: darkorange; border-top: 1px solid #d2d2d3; border-bottom: 1px solid #d2d2d3; margin: 20px 0px 20px 0px;}
  
  
  h1.head {font-family: verdana; font-size: 200%;}
  
  a { color: orange;}
  
  .sidebar { float: left; width: 25%; height: 100%;}
  
  #text { float: left; width: 70%;}
  
  body { text-align:center;}
  
  p, p a {text-align: left; font-size: 90%;}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
  &lt;div id="header"&gt;
   &lt;h1 class="head"&gt;&lt;b&gt;Hello, world ?&lt;/b&gt;&lt;/h1&gt;
  &lt;/div&gt;
  
  &lt;div id="bar-fixed"&gt;
   &lt;div class="sidebar"&gt;
    &lt;p class="bar"&gt;&lt;a href="#"&gt;
    Make this fixed when scroll&lt;/a&gt;&lt;/p&gt;
    &lt;p class="bar"&gt;&lt;a href="#"&gt;
    Make this fixed when scroll&lt;/a&gt;&lt;/p&gt;
    &lt;p class="bar"&gt;&lt;a href="#"&gt;
    Make this fixed when scroll&lt;/a&gt;&lt;/p&gt;
    &lt;p class="bar"&gt;&lt;a href="#"&gt;
    Make this fixed when scroll&lt;/a&gt;&lt;/p&gt;
    &lt;p class="bar"&gt;&lt;a href="#"&gt;
    Make this fixed when scroll&lt;/a&gt;&lt;/p&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="text"&gt;
  &lt;p&gt;I want the sidebar fixed when i scroll down over the Header. and the sidebar will go up LIKE STICKY SIDEBAR&lt;/p&gt;
  &lt;p&gt;I want the sidebar fixed when i scroll down over the Header. and the sidebar will go up LIKE STICKY SIDEBAR&lt;/p&gt;
  &lt;p&gt;I want the sidebar fixed when i scroll down over the Header. and the sidebar will go up LIKE STICKY SIDEBAR&lt;/p&gt;
  &lt;p&gt;I want the sidebar fixed when i scroll down over the Header. and the sidebar will go up LIKE STICKY SIDEBAR&lt;/p&gt;
  &lt;p&gt;I want the sidebar fixed when i scroll down over the Header. and the sidebar will go up LIKE STICKY SIDEBAR&lt;/p&gt;
  &lt;p&gt;I want the sidebar fixed when i scroll down over the Header. and the sidebar will go up LIKE STICKY SIDEBAR&lt;/p&gt;
  &lt;p&gt;I want the sidebar fixed when i scroll down over the Header. and the sidebar will go up LIKE STICKY SIDEBAR&lt;/p&gt;
  &lt;p&gt;I want the sidebar fixed when i scroll down over the Header. and the sidebar will go up LIKE STICKY SIDEBAR&lt;/p&gt;
  &lt;/div&gt;
    
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>