Animate the Div top & left postion based on the scrolling
<p>I am trying to achieve the below 2 points like as in this site " <a href="http://unfold.no/" rel="nofollow">http://unfold.no/</a> " </p>

<ol>
<li><p>Red background Div and Black background div top &amp; left position are animated based on<br>
scrolling.</p></li>
<li><p>Fixed Top navigation(right side at top position) color is changed once Red or Black divs are reached(overlapped) the Top navigation.</p></li>
</ol>

<p>Using the below code i am able to animate the Div positions but it is not working like as <a href="http://unfold.no/" rel="nofollow">http://unfold.no/</a> site.</p>

<pre><code>$(document).ready(function () {

        var prv = 0;
        $(window).scroll(function () {
            var current = $(window).scrollTop();
            if (current &gt; prv) {

                $('#div-about').animate({ top: "-=" + current / 5, left: "-=" + current / 14 }, 400, "easeOutExpo");
                prv = current;
            }
            else {
                $('#div-about').animate({ top: "+=" + current / 4, left: "+=" + current / 12 }, 400, "easeOutExpo");
                prv = current;
            }

        });
 });
</code></pre>

<p>please help me to achieve these 2 points.</p>
