可滾動畫布菜單

我剛剛在codepen上發現了一個有趣的畫布外菜單。如果有人點擊漢堡包圖標，它會顯示包含其內容的重疊菜單。但那個覆蓋菜單根本無法向下滾動。如果某人向下滾動，則後面的頁面正在滾動;而不是疊加菜單。我需要向下滾動該覆蓋頁面。我檢查了代碼並發現了問題。它使用overflow:hidden作爲包裝div。我將overflow: auto設置爲該div;似乎問題解決了。但是背景頁面仍然使用覆蓋菜單向下滾動。我怎樣才能設置只有覆蓋菜單向下滾動？可滾動畫布菜單

.overlay { 
    position: fixed; 
    background: $color-main; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 0%; 
    opacity: 0; 
    visibility: hidden; 
    transition: opacity .35s, visibility .35s, height .35s; 
    overflow: hidden; 
}

這裏是鏈接codepen

來源

2017-06-02 Janath

使overflow:scroll;在覆蓋類，然後添加更多的鏈接菜單。它會滾動。

對於頁面滾動，改變了jQuery這樣

$('#toggle').click(function() { 
$(this).toggleClass('active'); 
$('#overlay').toggleClass('open'); 
$('body').css('overflow', 'hidden'); 
});

，這將使人體不可滾動菜單時按下。

來源

2017-06-02 05:31:57 tsdln

當我點擊漢堡圖標使用這個腳本，菜單沒有工作。 – Janath

它的工作原理是因爲身體內容非常低。嘗試將更多內容添加到正文（不是列表項）並查看。 – Janath

對不起，鏈接是錯誤的..我改了它https://codepen.io/tsdln/pen/BZBOxQ – tsdln

可滾動畫布菜單

回答

相關問題