title: Need to fix div when scrolling stay 20px from top
body: <p>I am not sure wether this can be done with pure CSS or if I need to use some jQuery to do this.</p>
  
  <p>I have a div (product_image) that in its current state sits at about 400px from the top and positioned relative so it clears the top menu and header, what I need to do is when a user scrolls down and gets to about 20px from the top of the div, I need the div to become fixed.</p>
  
  <p>Here's what I have tried, I have the main div with relative positioning then I have another div wrapping everything inside with fixed positioning. The problem is that the div is staying put at 400px from the top.</p>
  
  <p>Here's the code:</p>
  
  <pre><code>&lt;div class="product_image"&gt;
      &lt;div class="product_image_fixed"&gt;
      &lt;a href="products/1.jpg" class="zoom" title="A bed!" rel="gal1"&gt;  
          &lt;img src="products/1.jpg" width="450" alt="" title="A bed!"&gt;  
      &lt;/a&gt;
  
      &lt;ul id="thumblist" class="clearfix" &gt;
          &lt;li&gt;&lt;a class="zoomThumbActive" href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: 'products/1.jpg',largeimage: 'products/1.jpg'}"&gt;&lt;img src='products/1.jpg' width="150" height="100"&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: 'products/1a.jpg',largeimage: 'products/1a.jpg'}"&gt;&lt;img src='products/1a.jpg' width="150" height="100"&gt;&lt;/a&gt;&lt;/li&gt;    &lt;/ul&gt;
      &lt;/div&gt;
      &lt;/div&gt; 
  </code></pre>
  
  <p>And the CSS</p>
  
  <pre><code>.product_image {
      position: relative;
      float: left;
      width: 450px;
      margin-left: 10px;
      margin-top: 10px;
  }
  
  .product_image_fixed {
      position: fixed;
      float: left;
  }
  </code></pre>
  
  <p>I hope I have made the question clear enough, I can't seem to find a solution to this around so I thank you in advance for your help!</p>