Javascript 包含div（js）的浮动菜单栏

我的网页上有一个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中。如何使floatbar定位在menu runner div中，然后在div中使用JavaScript向下滚动

下面是我的代码的现场演示：

这里有一个方法：

Javascript:

$(window).scroll(function() {
if ($(window).scrollTop() >= 200) {
    screenWidth = $(window).width();
    containerWidth = $("#menu_runner").outerWidth(true);
    pos = screenWidth - containerWidth;
    $("#floatbar").css({
        position: 'fixed',
        left: pos,
        top: '0'
    });
}
else {
    $("#floatbar").css({
        position: 'absolute',
        left: '0',
        top: '200px'
    });
}
});

我们的想法是得到屏幕的宽度，菜单容器的宽度，从中我们得到如何定位菜单的左边缘，使其与容器对齐

在css中，添加：

body{
    padding: 0;
    margin: 0;
}

它修复了由于浏览器设置的默认页边距，在没有它的情况下会出现的稍微偏离位置的问题

当您将菜单滚动到顶部时，您可能会看到菜单反弹到位，这很不幸，但希望不会有太大问题

这在IE6中不起作用，因为使用了位置：fixed。你必须寻找解决办法。我不太熟悉什么是公认的解决方法（但谷歌展示了一些可能有效的黑客）

---

我很好奇，你为什么要这样做？为什么菜单与屏幕一起滚动，然后在顶部停止？为什么不从一开始就把它固定在屏幕上的一个位置，比如？

等等，什么？你的问题能再精确一点吗？我真的不明白问题是什么。嗨，blender，我的问题是我希望我的菜单包含在floatbar div中，定位在我的页面上，以便它沿着我的内容运行。这是一个两列布局，容器div位于页面的中心，这意味着我不能只使用绝对定位，因为我在屏幕上的位置在另一个大小的屏幕上会不同（与内容相关）。因此，我需要将菜单定位在“menu\u runner”div中，该div是我想要的位置，并将在所有屏幕上正确显示。我所需要的只是一种将JS包含在该分区中的方法。有什么想法吗？对于javascript，我是一个新手，我必须在必要时使用它来实现我在这里追求的效果。我应该调整代码以包括屏幕宽度和容器宽度，还是您发布的代码是最终代码？我需要使用这种方法，正如我在上述帖子中对“blender”的评论中所解释的那样（希望能澄清这方面的问题）。我试图实现您的代码，但它只是向右移动，这一定意味着它现在包含在菜单运行程序中（在您的帮助之前不是这样！），但现在菜单运行程序不正确了？感谢您的帮助宽度是使用javascript自动计算出来的，因此代码不需要调整。您是否在页面中添加了其他内容，或者您只是在尝试新的内容时说有问题？我确实移动了一点菜单，并在主体中添加了css，这就是问题所在吗？删除它会使您恢复原来的位置，但当您滚动浮动条时，浮动条会关闭一点，您需要进一步调整其位置。此外，在不深入所有细节的情况下，从技术上讲，您的浮动条不包含在菜单中，因为对于定位为绝对或固定的元素，这是不可能的。我只是让它看起来像是（但是你必须问：你真的需要那个容器吗？因为类似的东西可以让你的菜单一直在你的视线中）。我相信还有其他（更好的）方法来实现你想要的布局，也许其他人也能提供。嗨，zxt，我想我确实需要菜单运行器，但是，如果你说我试图实现的效果是不可能的，那么也许会是。是我正在编码的站点。因为这是我需要效果的页面，所以我需要将菜单放在正文中所有文章内容的旁边。你认为这可能吗？如果没有，你迄今为止的帮助是非常好的，我会把你的答案选在最前面，至少现在它在右边了！：）你好，zxt。用脚本排序。不过，感谢您的帮助，您帮助我更好地理解了我正在实现的js！：）

$(window).scroll(function() {
if ($(window).scrollTop() >= 200) {
    screenWidth = $(window).width();
    containerWidth = $("#menu_runner").outerWidth(true);
    pos = screenWidth - containerWidth;
    $("#floatbar").css({
        position: 'fixed',
        left: pos,
        top: '0'
    });
}
else {
    $("#floatbar").css({
        position: 'absolute',
        left: '0',
        top: '200px'
    });
}
});

body{
    padding: 0;
    margin: 0;
}