Javascript 推动内容的非画布侧边栏？

是否可以从左侧切换侧导航菜单，同时将其他内容与不透明的颜色叠加在一起

我尝试在桌面上的浏览器中完美运行的版本，但当我切换到移动设备时，边栏会扩展页面的高度，页面会失去流动性

示例：更新-当我在移动设备上通过Codeply查看页面时，它工作得非常好。但是，只有当左菜单上载到我的网站时，它才会在移动设备上显示。另外，如果我从右手边转换左菜单，也可以很好地工作，而且菜单不会放大。。。这只是它从左边过渡过来的原因

编辑：Codeply链接已更新代码

---

编辑：

问题在于，您正在对

#mainWrapper

（

translateX（80%）

）应用转换，这也会影响

位置：固定的
元素

您可以重新设置整个页面的样式，以确保
#mainWrapper
元素一直到达页面底部，也可以将覆盖层移到
#mainWrapper
之外


只是把两个覆盖层移到外面

改变

<div class="main-wrapper" id="mainWrapper" style="height: 100vh; width: 100vw;">
    <div class="service-menu-overlay" id="serviceMenuOverlay" onClick="closeServices()"></div>
    <div class="burger-menu-overlay" id="burgerMenuOverlay" onClick="closeBurger()"></div>

到

应该可以解决大多数问题。
你能发布相关代码，或者更好的一个工作示例吗？用一个示例更新了我的问题：）你是否在页面中添加了
？是的，我的标签如下：
你能提供一个指向你的网站的链接来展示问题吗？你能提供一些例子让我进一步了解如何实现它吗？我完全理解你的意思，但无论我怎么尝试，它都不起作用。。。我可以让它在顶部导航菜单是静态的情况下工作，但我需要它始终固定在顶部。@meh1710添加了更新，以通过一些代码更改来回答问题
<div class="service-menu-overlay" id="serviceMenuOverlay" onClick="closeServices()"></div>
<div class="burger-menu-overlay" id="burgerMenuOverlay" onClick="closeBurger()"></div>

<div class="main-wrapper" id="mainWrapper" style="height: 100vh; width: 100vw;">

.service-menu-overlay.overlay-show{z-index: 5000 !important;}

.service-menu-overlay.overlay-show{z-index: 1 !important;}