打开画布菜单后如何将背景位置保持在同一位置？

Question

我有一张背景图片，可以在这里看到https://www.nova969.com.au/win/novas-sending-you-ed-sheeran

图像是主体的背景图像。 打开画布外菜单时，背景图像会发生变化。 我希望将背景图片保留在打开背景图片之前的确切位置。

您会注意到以下 css 用于正文

body.has-background {
    background-image: url(https://d2nzqyyfd6k6c7.cloudfront.net/nova-skins/972409-novafm-edsheeran-platwinpage-bg.jpg);
}

画布外打开时，会导致背景位置偏移。我需要确保背景不会移动。有人可以帮我解决这个问题吗？

目前，将两张图片合并为一张不是我们的选择。

另外，要复制，

• 使用桌面中的任何浏览器访问链接
• 向下滚动页面。
• 打开画布外菜单（左上角的那个）
• 您会注意到背景的变化

Answer 1

如果我正确理解了您的问题，那么以下应该可以解决它。

编辑：这似乎只是宽度超过 1200 像素的设备上的问题？如果是这样，则使用 @media (min-width: 1200px) 应用这些更改。

对以下选择器添加以下声明：

.disabledInteraction {
  position: relative;
}

（或从.disabledInteraction 中删除position: fixed;）

然后：

.header-fixed .site-wrapper {
    margin-top: 0 !important;
}

问题在于固定body 的位置。如果您删除此声明或将其更改为 position: relative，您可以看到这会阻止图像四处移动问题。

然后问题是文本向上移动屏幕，这是由于某些JS将边距更改为-268px引起的。添加margin: 0 !important 会覆盖这一点，但如果可以的话，你应该阻止 JS 添加这个负边距。

希望这会有所帮助！

Answer 2

您可能已经知道，这是网站的标准行为。内容随着可用区域的变化而变化（滚动是可见区域的一部分）导致页面的整个内容移动 17 像素？ （无论卷轴是什么）。

您需要做的是在侧边栏打开后附加一个滚动条。 我玩过你的网站，它可以工作，但是必须有一些 javascript 可以删除滚动条。

我本打算为你处理文件，但你返回的文件太多，我没有时间浏览所有文件。

选择器：

body > div.site-wrapper.off-canvas-menu-overlay

添加overflow-y：使用javascript滚动到那个div，在侧边栏打开事件上，或者当你在CSS中添加它时，确保一旦侧边栏打开，它就会停止，因为它似乎在添加样式公开活动。

Answer 3

我猜你的意思是页面左侧的“隐藏”菜单。

背景移动是因为当您打开菜单时滚动条被移除。

您可以更改代码以使滚动条保持可见，或移动背景图像以适应此更改。我不确定您是否可以这样做，因此它可以在每个浏览器中都没有闪烁，因此最好的办法是保持该滚动条可见。