固定位置的菜單欄與畫布重疊

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> 

請點擊 「新菜單欄」。需要的是，當我點擊「新菜單欄」時，畫布移動到底部，當我點擊「僅一個菜單」時，只顯示一個菜單並將畫布移動到頂部，如初始... 我沒有完全知道所有菜單欄的高度。

是否有任何技巧可以顯示，隱藏不設置邊距尺寸？

請幫我解決這個問題。

謝謝。

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()); 
}); 

另外，如果你不想設置畫布的位置是：相對的，你可以通過設置「邊距」，而不是「頂」做同樣的事情，但你說你想要一個替代由於某種原因利潤邊緣的方法。