javascript floating menu bar in holding div
<p>I have a JavaScript menu bar that is positioned on my webpage, then when the browser bar reaches the top of the menu it locks into a fixed position and moves with the window. However, i need to contain the menu within a div, how can this be done?</p>

<p>This is my menu bar:</p>

<pre><code>&lt;script type="text/javascript"     src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;script type='text/javascript'&gt;
$(window).load(function(){
    $(window).scroll(function(){
        if ($(window).scrollTop() &gt;= 200)
        {
            $("#floatbar").css({position:'fixed',left:'0',top:'0'});
        }
        else
        {
            $("#floatbar").css({position:'absolute',left:'0',top:'200px'});
        }
    });
});
&lt;/script&gt;
</code></pre>

<p>and this is my html:</p>

<pre><code>&lt;div id="menu_runner"&gt;
    &lt;div id="floatbar"&gt;
        &lt;a href="#issue49"&gt;Issue 49&lt;/a&gt;&lt;br /&gt;
        &lt;a href="#issue48"&gt;Issue 48&lt;/a&gt;&lt;br /&gt;
        &lt;a href="#issue47"&gt;Issue 47&lt;/a&gt;&lt;br /&gt;
        &lt;a href="#issue46"&gt;Issue 46&lt;/a&gt;&lt;br /&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>and my css:</p>

<pre><code>#menu_runner {
    width: 100px;
    height: 2000px;
    float: right;
    position: relative;
}
#floatbar {
    width: 70px;
    position: absolute;
    top: 200px;
}
</code></pre>

<p>where the menu runner is the containing div of the menu, and the floatbar obviously contains the menu which runs the JavaScript.</p>

<p>However when I try this code, the menu sticks to the left and 200px from the top, and not within the menu_runner div. How can i make the floatbar be positioned in the menu_runner div and then scroll down with the JavaScript within the div as it should.</p>
