title: Reducing or increasing a <div> in height for every pixel scrolled down or up with Jquery with maximum of the original height
body: <p>I am trying to figure out how to reduce a <code>&lt;div&gt;</code> in height by 1 pixel for every 1 pixel scrolled down and then increase in height for every 1 pixel scrolled up. With a maximum increase/decrease equal to the original height.</p>
  
  <p>Here is an example of the <code>&lt;div&gt;</code> before I started scrolling, which is 40px:</p>
  
  <pre><code>&lt;div class="toplayer" style="height:40px&gt; content &lt;/div&gt;
  </code></pre>
  
  <p>Then I scroll down 30px, it would now be this</p>
  
  <pre><code>&lt;div class="toplayer" style="height:10px&gt; content &lt;/div&gt;
  </code></pre>
  
  <p>But if I scroll back up 5px, it would now be this:</p>
  
  <pre><code>&lt;div class="toplayer" style="height:15px&gt; content &lt;/div&gt;
  </code></pre>
  
  <p>However this is probably the hardest part, if I scrolled down any amount of pixels that is greater than the original part height of 40px, it should be this:</p>
  
  <pre><code>&lt;div class="toplayer" style="height:0px&gt; content &lt;/div&gt;
  </code></pre>
  
  <p>Also if I scroll back up, should never increase beyond the original 40px</p>