jQuery scrolling DIV is jumpy and positioned incorrectly
<p>Not too long ago I asked about setting up a DIV which scrolls with the rest of the page. Post can be found <a href="http://stackoverflow.com/questions/8647840/div-container-following-scroll-of-screen">here</a>.</p>

<p>I've set this up, using the following code:</p>

<p>JS..</p>

<pre><code>jQuery(function ($) {
    var el = $('#sidebar'),
    pos = el.position().top;

    alert(pos);

    $(window).scroll(function() {
        el.toggleClass('fixed', $(this).scrollTop() &gt;= pos);
    });
});
</code></pre>

<p>CSS..</p>

<pre><code>/* profile sidebar */
#sidebar&gt;div{ width: 300px; margin-top: 10px; }
#sidebar.fixed&gt;div{position:fixed;top:0}
</code></pre>

<p>A copy of the page can be found <a href="http://dunc.seriouslyfish.com/test.htm" rel="nofollow">here</a>. The alert was just some debugging.</p>

<p>The problem is, when you scroll a small amount, <code>#sidebar</code> suddenly appears at the very top of the page. In addition, sometimes as you scroll further down, the sidebar appears - and sometimes it doesn't.</p>

<p>Any idea what might be causing such seemingly random functionality?</p>
