javascript - 包装内的固定侧边菜单

Question

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

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

这是一个使用 position: fixed 的例子: https://jsfiddle.net/okavp4p1/

如您所见，菜单是从视口(viewport)的一侧出现的，而不是包装器(灰色区域)。

我已经使用 position: absolute 解决了这个问题: https://jsfiddle.net/5q3hn1fq/

在这里你可以看到菜单是从 wrapper 中出来的。 (正确)

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

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

但这样做会导致大多数网络浏览器出现故障/滞后。虽然这个例子在滚动时还不错，但是当在具有更多元素/代码的实际站点上实现它时，它变得非常明显。

这是向下滚动页面时使用时的样子:

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

Answer 1

有一个解决方法。您需要使用 position:fixed 在顶部创建一个栏。这个栏应该有 height: 1px 并且没有背景颜色，所以你看不到它。

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

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

这是 fiddle :https://jsfiddle.net/ahmadabdul3/pptggn6v/1/

由于条形图位于 position:relative 条形图内，因此它不应该跳动太多(或根本不跳动)

但是不要在导航中添加左右填充，这会破坏效果。相反，您可以在导航周围放置一个容器，并将导航宽度设置为:90% 或其他值，使其看起来有一些填充。

这是一个关于填充应该如何的更新 fiddle :https://jsfiddle.net/ahmadabdul3/pptggn6v/2/