固定狀態欄與滑出菜單衝突

我正在製作一個頁面頂部有固定狀態欄的網站，例如iOS狀態欄。我希望它被固定在頂部，所以它總是在那裏，並且內容在它下面滾動。我還有一個由狀態欄上的按鈕觸發的滑出式菜單。所有的網站內容都被封裝在一個div中，當菜單滑出時它會被推到側面。固定狀態欄與滑出菜單衝突

當菜單滑出時，狀態欄出現問題。因爲它設置爲position: fixed;，所以不喜歡被移動。它將狀態欄推下頁面。

我的狀態欄CSS：

.toolbar { 
color: purple; 
position: fixed; 
width: 100%; 
height: 60px; 
top: 0; 
left: 0; 
padding-top: 20px; 
background: white; 
border-bottom: 1px solid $white; 
z-index: 99; 
text-align: center; 
}

的JS小提琴是問題的一個很好的例子，只要按一下MENU鍵。

的jsfiddle： https://jsfiddle.net/mqrso95g/1/

來源

2016-08-05 gkrizek

編輯基於評論：

如果你把你的資產淨值的內一個div，你可以添加一個利潤率左到內div時菜單打開。當側面菜單打開時，此jsfiddle現在仍然可以看到菜單按鈕。

我在工具欄中添加了一個變量Menu.prototype._init，並使用.inner.is-active{ padding-left:300px; }填充固定導航欄中的內容。如果沒有延伸到頁面的邊上，則無法向固定元素添加邊距或填充。

https://jsfiddle.net/Lz9fqvy8/

原來的答案

================================= ====

如果您讓內容隱藏在滑出菜單下方，工具欄將保留原位。爲了實現這個目標，我從.site-wrap.has-push-left中刪除了translateX。

https://jsfiddle.net/hg9038vd/

您也可以替換translateX用margin-left:300px和工具欄不會推下來。

https://jsfiddle.net/m5xcq3zf/

來源

2016-08-05 13:35:02

感謝您的幫助！我知道滑動內容是一種選擇，但我真的想推動內容。儘管第二種解決方案確實保留了狀態欄，但它似乎並未將其移至其他位置，或至少移動按鈕。看到這個更新：https://jsfiddle.net/m5xcq3zf/1/我想菜單按鈕滑過，當菜單彈出時仍然可見（並且應用文本從頁面滑出，就好像它正在將整個狀態欄移出視圖）。有沒有辦法做到這一點？ – gkrizek

想出了最後一部分。我只需要將left：0;'改爲'margin：0;'現在一切都很流暢，看起來很棒！我仍然將你的答案標記爲正確，我只需要做一點小改動就可以得到我想要的確切結果。最後的小提琴：https://jsfiddle.net/m5xcq3zf/2/ – gkrizek

最後一個音符。如果您希望所有內容保持完全相同，並且沒有通過'margin-left：300;'更改重新格式化，則必須添加'＃site-wrap {width：100％; }'早些時候在CSS中，所以它不會被調整大小。 – gkrizek

固定狀態欄與滑出菜單衝突

回答

相關問題