javascript - 关闭推送内容的 Canvas 边栏？

Question

是否可以让侧边导航菜单从左侧过渡，同时推送其他内容以及不透明的颜色叠加层？

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

示例:已更新 https://www.codeply.com/p/RRVDkqEyj4 - 当我在移动设备上通过 Codeply 查看页面时，它运行良好。然而，this是左侧菜单在上传到我的网站时仅在移动设备上的显示方式。另外，如果我使左侧菜单从右侧过渡，那也可以完美地工作，并且菜单不会缩放得更大……这只是与它从左侧过渡有关。

编辑:Codeply 链接已更新代码。

编辑:My issue has now been resolved .

Answer 1

问题是您正在对 #mainWrapper (translateX(80%)) 应用转换，这会影响 position:fixed 元素也在其中。

您可以重新设置整个页面的样式以确保 #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>

到

<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;}

应该可以解决大部分问题。