在holding div中的javascript浮动菜单栏

我的网页上有一个JavaScript菜单栏，当浏览器栏到达菜单顶部时，它会锁定在一个固定位置，并随窗口移动。但是，我需要将菜单包含在一个div中，如何才能做到这一点

这是我的菜单栏：

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

其中，menu runner是菜单的包含div，而floatbar显然包含运行JavaScript的菜单

---

但是，当我尝试这段代码时，菜单会向左移动，从顶部开始移动200px，而不是在menu runner div中。如何将浮动条定位在menu runner div中，然后在div中使用JavaScript向下滚动。为什么不将

$（“#floatbar”）.css（）更改为
$（“#menu runner”）.css（）
？
是的，我想这就是你想要做的：）
<div id="menu_runner">
    <div id="floatbar">
        <a href="#issue49">Issue 49</a><br />
        <a href="#issue48">Issue 48</a><br />
        <a href="#issue47">Issue 47</a><br />
        <a href="#issue46">Issue 46</a><br />
    </div>
</div>

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