Live demo

Question

我有一个位于我的网页上的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>

这是我的HTML：

<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>

和我的css：

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

其中菜单运行器是包含菜单的div，浮动栏显然包含运行JavaScript的菜单。

然而，当我尝试使用此代码时，菜单会向左移动并从顶部开始200px，而不是在menu_runner div中。如何使浮动条位于menu_runner div中，然后使用div中的JavaScript向下滚动。

以下是我的代码的实时演示：http://jsfiddle.net/f4dhy/

Answer 1

这是一种方法：

Live demo

使用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中不起作用，因为位置：已使用固定。您将不得不寻找解决方案。我对已接受的解决方法不太熟悉（但quick google search显示了一些可能有效的黑客行为）

我很好奇，你有什么理由想这样做吗？为什么菜单会随屏幕滚动然后停在顶部？为什么不从一开始就把它固定在屏幕上的一个地方，比如this？

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

1 个答案:

Live demo