Question

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

问题在于我有其他菜单，有时我需要将其显示为可见并与画布重叠。

我在这里举了一个小例子：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菜单”时，只显示1个菜单并将画布移动到顶部，如初始... 我不确切知道所有菜单栏的高度。

是否有任何技巧可以显示，隐藏不设置边距大小？

请帮我解决这个问题。

谢谢。

Answer 1

好的，你需要一个javascript解决方案;

使用jsFiddle http://jsfiddle.net/NgHTN/4/

基本上，在我们将每个块显示到#menus div的高度后，我们将设置顶部的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());
});

或者，如果你不想将canvas设置为position：relative，你可以通过设置“margin-top”而不是“top”来做同样的事情，但你说你想要一个替代方法来获得边距某些原因。

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

1 个答案: