如何在移动设备上滚动叠加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设置为：< / p>

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

这样，div（以及导航菜单的内部内容）将可滚动，而菜单的整体位置保持固定。