固定菜单溢出移动浏览器和不可滚动

Question

为了练习而使用 jQuery/CSS 响应式菜单，我遇到了一个问题，如果不从根本上改变菜单的工作方式，我根本不知道如何解决。

基本上，如果您查看http://www.fraserboag.com/test/refined.html，您就会知道它是如何工作的。如果您将浏览器窗口缩小到 800 像素以下，它会变成一个滑出式菜单。它的位置都是固定的，所以当您向下滚动内容时，它会在页面顶部保持可见。

我遇到的问题是浏览器窗口较小（例如在移动设备上）。当您点击其中一个主菜单项（或桌面上的鼠标悬停）时，例如“信息”，许多子菜单选项会在屏幕底部列出，当您滚动页面时，菜单后面的内容会滚动而不是比菜单本身。

显然，解决方案是菜单在打开时应获得滚动优先级，而在菜单关闭时页面内容应获得滚动优先级，但我完全不知道该怎么做（或者如果它是甚至可能）。

此菜单的固定顶部性质对我来说很重要，因为我想编写此代码并在未来的移动项目中重用它。而且我意识到在移动浏览器上，子菜单也会从浏览器窗口的右侧溢出，但我会通过缩小文本大小来解决这个问题。

欢迎所有建议 - 非常感谢！ 弗雷泽

Answer 1

不建议对移动设备使用“固定”位置，因为它在很大程度上不受支持。见这里：

CSS "position: fixed;" on iPad/iPhone?

正是“固定”位置导致了您的问题，因为固定位置会从 DOM 的正常流程中移除元素。

更好的方法是查看像 headroom.js 这样的插件。