Question

所以我有一个包含在最大宽度的包装中的网站。该站点还有一个固定的侧面菜单，可以通过按钮切换。

我的问题是将固定的侧面菜单留在页面包装器内，因为固定元素是相对于窗口而不是父元素。

以下是使用position: fixed的示例： https://jsfiddle.net/okavp4p1/

正如您所看到的，菜单是从视口侧面出来的，而不是包装器（灰色区域）。

我使用position: absolute发现了这一点： https://jsfiddle.net/5q3hn1fq/

在这里，您可以看到菜单来自包装器。（正确的）

但我不得不写一些额外的jQuery来欺骗固定的滚动定位。

// Fix menu
$(window).on('load scroll resize', function() {
    navigation.find('ul').css('top', $(window).scrollTop());
});

但这样做会导致大多数网络浏览器出现故障/延迟。虽然滚动时示例并不坏，但是在实际网站上实现这一点时，需要更多的元素/代码，这一点非常明显。

以下是向下滚动页面时的样子：

我想过在菜单打开时禁用滚动，但我只是想知道是否有人可以提供帮助？

Answer 1

有一个解决方法。您需要使用position:fixed在顶部创建一个栏。此栏应该有height: 1px而没有背景颜色，因此您无法看到它。

然后您可以在其中添加导航和float:right。当你向右浮动时，它会出现，但会固定在顶部看不见的固定条上。另外，你必须给导航宽度为0，使其不可见。然后你可以在按钮点击时将其宽度转换为100px或任何你想要的。

最后，使用jQuery在调整窗口大小时将其高度设置为窗口的高度，并在显示时显示。

因为栏位于一个位置：相对栏，它不应该跳得那么多（或者根本）

不要在导航中添加右边或左边的填充，这会破坏效果。相反，你可以在导航器周围放置一个容器，并使导航宽度：90％或其他东西，使其看起来有一些填充。

这里有一个关于填充应该如何更新的小提琴：https://jsfiddle.net/ahmadabdul3/pptggn6v/2/

Answer 2

如果所有浏览器的性能都是问题，那么您可以使用普通的.js而不是jquery重新编写函数。

我无法复制Chrome中的抖动，但下面应该减少对浏览器的压力。

<div id="{{ form.vars.name }}">