如何同时修复滚动背景和导航？答案

【问题标题】：How to fix scrolling background and nav at same time?如何同时修复滚动背景和导航？
【发布时间】：2023-03-31 03:04:01
【问题描述】：

当我的博客https://blog.teiltonung.de被移动设备访问时，我正在尝试修复以下错误：

如果您打开移动导航，它是一个 nav-element 在 css-class ".et-mobile-navigation" 是 body-element 的一部分 nav-element 是可滚动的，但整个页面内容在 nav-element 也是可滚动的，所以这确实有问题。

除了重写 html 以将 nav-element 放在 body-element 之外以便能够做到 overflow: hidden 在身体上？我的问题是，我正在使用优雅主题中的 Extra-Theme，所以我无法对主题的基本结构进行大量的 html 编辑。 :(

【问题讨论】：

标签： html wordpress scroll nav document-body

【解决方案1】：

您需要为#et-mobile-navigation nav提供一个固定高度，例如：

#et-mobile-navigation nav{
  height:300px;
}

让内层滚动生效，防止从body层面滚动。

【讨论】：

具有固定高度我要设置的问题是响应式的，因为我不能使用“%”值，因为导航元素中的父元素将具有相同的像主导航栏这样的高度和“vh”值它不起作用:(你知道如何让它保持响应吗？
你可以做的是使用 CSS 媒体查询来创建断点，例如当你在 \@media only screen and (max-width: 500px) { #et-mobile-navigation nav{ height ：400像素； } } 当你在 \@media only screen and (max-width: 350px) { #et-mobile-navigation nav{ height:300px; } }.....
好吧，这看起来像是一个临时解决方案，但它并没有真正响应：/ 你真的不知道真正的响应解决方案吗？除此之外，我已经非常感谢你的深夜帮助，给你一些爱！ :)
导航的设置方式存在问题，正确的高度 100% 应该可以解决问题，但是因为 html 嵌套在移动徽标中，因此高度 100% 不会工作。另一种解决方案是使用 javascript 监控屏幕高度并附加到导航，或者您甚至可以在导航处于活动状态时使用 js 禁用父滚动条
是的，这是个大问题，因为 100% 的高度将由父元素定义，并且编辑 html 如此重，以至于它被正确配置用于这一目的我没有技能。但是使用 javascript 来检测屏幕大小并将这个值放在 height: 中似乎是一个不错的解决方案。你知道这样做的代码吗？我现在会在谷歌上寻找它，但也许你知道一些有用的东西:)

【解决方案2】：

您可以使菜单具有粘性。或者不粘，注意你的主题设置。在移动主题设置中应该有某种切换器。此外，您还可以玩：

<nav style="display: block;">

css:

#et-mobile-navigation nav {
    overflow: scroll !important;

老兄，改变高度：300px；到高度：20%；

【讨论】：

老兄，改变高度：300px；到高度：20%；