Adjust scrolling speed/position of element based on it's height and the page's height
<p>I'm trying to create a dynamic way to adjust an element's scroll speed based on it's height. At its simplest, there are three parts at play - the viewport, the page itself, and this element. Depending on the height of the element and the height of the page itself, I want to control it's positioning while I scroll, which will create a parallax style effect.</p>

<p>I think what I'm hoping to accomplish is to make the element fixed and adjust it's <code>top:</code> or <code>bottom:</code> based on the scroll position. </p>

<p>Here's a diagram that may better explain what I'm trying to accomplish:</p>

<p><a href="http://lab.zmwlt.com/scroller" rel="nofollow">http://lab.zmwlt.com/scroller</a></p>

<p>It's extremely basic, but here's an example of what the markup may look like:</p>

<pre><code>&lt;div class="container"&gt;
  &lt;div class="the-element"&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>Any help is greatly appreciated - this is way outside my JS abilities.</p>
