title: Javascript sticky div after scroll
body: <p>This question maybe stupid for many here. I am making sticky div after scroll in pure JS. Some people may advice to make it in jQuery but i am not interested in it. What i need is something similar to <a href="http://jsbin.com/omanut/2" rel="noreferrer"><strong>this</strong></a>. Here the div moves all the way to top but i need it to have 60px top. I made a script but it not working. Can anyone help me solve this? </p>
  
  <p>Here is my code.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="left"&gt;&lt;/div&gt;
  &lt;div id="right"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#left{
      float:left;
      width:100px;
      height:200px;
      background:yellow;
  }
  
  #right{
      float:right;
      width:100px;
      height:1000px;
      background:red;
      margin-top:200px;
  }
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>window.onscroll = function()
  {
      var left = document.getElementById("left");
  
  
  
      if (left.scrollTop &lt; 60 || self.pageYOffset &lt; 60) {
          left.style.position = 'fixed';
          left.style.top = '60px';
      } else if (left.scrollTop &gt; 60 || self.pageYOffset &gt; 60) {
          left.style.position = 'absolute';
          left.style.margin-top = '200px';
      }
  
  }
  </code></pre>
  
  <p>This what i need to achieve. The left div has to have <code>margin-top:200px</code> and <code>position:absolute</code> on page load. When the user scrolls the page, the left div should scroll and when it reaches <code>top:60px;</code> its position and margin-top should change to <code>position:fixed</code> and <code>margin-top:60px;</code></p>
  
  <p>Here is the <a href="http://jsfiddle.net/bud4S/2/" rel="noreferrer"><strong>FIDDLE</strong></a></p>