固定位置的菜单栏与画布重叠

ptCoder

我的网站菜单栏有问题。我需要固定菜单栏以便在画布上工作。我已设定位置：固定。

问题是我有其他菜单，有时我需要使菜单可见并与画布重叠。

我在这里举一个小例子：http : //jsfiddle.net/ptCoder/NgHTN/1/

<div id="menus">
    <div id="hbar">Menu Bar</div>
    <div id="hbar1" style="display:none;">Menu Bar 1</div>
    <div id="hbar2" style="display:none;">Menu Bar 2</div>
</div>
<div class="container">
    <canvas id="c" width="500px" height="800px">CANVAS</canvas>
</div>

请点击“新菜单栏”。需要的是，当我单击“新建菜单栏”时，画布移至底部，而当我单击“仅一个菜单”时，仅显示1个菜单并将画布移至顶部，如初始...我不知道精确地是所有菜单栏的高度。

有没有显示的技巧，隐藏未设置边距大小？

请帮我解决这个问题。

谢谢你。

尼基塔240

好的，您将需要一个javascript解决方案；

工作jsFiddle http://jsfiddle.net/NgHTN/4/

基本上，在将每个块显示到#menus div的高度后，我们将设置top css参数。

首先，将canvas设置为position：relative。

然后添加处理程序。

$("#btnNewMenu").click(function(){
    $("#hbar1").css("display","block");
    $("#hbar2").css("display","block");
    $(".container").css("top", $("#menus").height());
});

$("#btnShow").click(function(){
    $("#menus").show();
    $(".container").css("top", $("#menus").height());
});

$("#btnHide").click(function(){
    $("#menus").hide();
    $(".container").css("top", 0);
});

$("#btnOnly1").click(function(){
    $("#hbar").css("display","block");
    $("#hbar1").css("display","none");
    $("#hbar2").css("display","none");
    $(".container").css("top", $("#menus").height());
});