title: Making a div scroll with the page after a certain distance
body: <p>I have a web page set up with 225px of header space and then the body begins. I have a floating div that I want to follow with the body as the page gets scrolled down. The div follows but I dont want it to start until the user has scrolled past the header. Here is a picture example:</p>
  
  <p><img src="https://i.stack.imgur.com/tApBx.png" alt="image example"></p>
  
  <p>Once the user has scrolled past all the red (225px), then the blue div should being scrolling with the page.</p>
  
  <p>The current problem is that the div begins moving the second the user scrolls through the header and ends up 225px below the top of the page.</p>
  
  <p>I believe something like this is what I need, but it doesn't seem to do anything (at least in chrome)</p>
  
  <pre><code>if($(window).scrollTop() &gt; 255)
      {
          //begin to scroll
          $("#floating_list").css("position","fixed");
          $("#floating_list").css("top",0);
      }
      else
      {
          //lock it back into place
          $("#floating_list").css("position","relative");
      }
  </code></pre>
  
  <p>Thanks!</p>