jquery - 使用可滚动菜单固定主要内容的位置

Question

我有以下页面（基于 david bushell off canvas responsive menu）：

它显示一个响应式菜单（不完全正常工作），当您缩小浏览器的宽度时，三个水平线图标将可见。当您单击它时，菜单会滑入，这就是我遇到问题的地方，因为所有链接都不可见。

首先，我希望菜单项一直在页面下方列出，并且不限于主要内容的高度。其次，我想冻结主要内容，只让菜单可滚动（如果您参考http://disney.com/?intoverride=true，这是单击菜单时我希望实现的示例内容冻结，但菜单仍可滚动）。

我已经尝试将位置固定到不起作用的主要内容。对此的任何帮助将不胜感激。

提前致谢。

score 0 · Accepted Answer

您需要将#nav 上的“溢出”值更改为“滚动”。因此，您的 CSS 将显示为：

#nav { 
  position: absolute;
  top: 0;
  padding-top: 5.25em;
  overflow: scroll;
  etc......
}

通过溢出：滚动，您至少可以让您的用户滚动浏览您的菜单列表。

score 0 · Accepted Answer

您将不得不对您的 css 进行大量更改，太多无法在此处有效列出，并且足以让我自己完全测试这一点并不容易。

这里的主要目标是使列表具有真实的高度，并且元素在布局中被忽略的绝对位置。

删除和元素translate3d上的属性并改为向左浮动。然后，您将不得不使用元素的溢出、宽度以及可能的许多其他属性，以使其按您希望的方式显示。#nav#main#nav#main

其中一些将需要新的规则，例如#nav { width: 0; } html.js-nav #nav { width: 70%; }，您可以在应该显示菜单时进行转换。

这是一个起点，它应该让你处于比现在更好的位置，如果你在这条线上陷入困境，请回来寻求更多帮助。

2 回答 2