如何在移動設備上滾動疊加div

Question

我有一個移動網站，其中有一個導航菜單，點擊右上角的固定位置按鈕即可顯示。 此菜單也是固定的，因此菜單頂部的開頭位於按鈕底部下方10px處。 問題是此導航菜單可能比正在使用的設備的高度更長，當您嘗試滾動時，它將滾動導航菜單后面的內容，看它是否已修復。 有人可以幫我解決這個問題嗎？

Answer 1

根據我的評論：

您需要使用JS來查找屏幕的高度，菜單頂部並將菜單的最大高度設置為這些的差異

對於窗口的高度，使用$('window').height()

對於菜單距離瀏覽器頂部的距離： $('.menu').offset()

該函數應該存在於show menu事件監聽器中：

var maxHeight = $(window).height() - $('.menu').offset();
$('.menu').css({ "max-height" :maxHeight})

確保overflow:scroll; 在menu上設置

Answer 2

你需要做的是在導航菜單中放置一個帶有類（我選擇scrollable ）的div，它具有可滾動內容，然后將該div的css設置為以下內容：

div.scrollable{
   overflow : auto;
   position : relative;
   }

這樣，div（以及導航菜單的內部內容）將是可滾動的，而菜單的整體位置保持固定。