我正在为全屏菜单构建Wordpress插件。我已经在台式机上完美地完成了操作,但是在iPhone Safari和Chrome上似乎有问题,当我打开全屏菜单并向下滚动(滚动弹跳效果后)时,关闭按钮立即消失,因此无法关闭菜单
下面是代码,我仅使用HTML和CSS来实现菜单。
.aglaia-jewelry-wrapper input[type='checkbox'] {
display: none;
}
.aglaia-jewelry-wrapper .icon-bars {
display: block;
width: 30px;
height: 30px;
position: relative;
z-index: 1999;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.aglaia-jewelry-wrapper .icon-bar {
width: 100%;
height: 2px;
position: absolute;
top: 50%;
left: 0;
background-color: black;
backface-visibility: hidden;
transition: all 0.3s ease;
}
.aglaia-jewelry-wrapper .icon-bar.bar-top {
margin-top: 10px;
transform: rotate(0deg);
}
.aglaia-jewelry-wrapper .icon-bar.bar-middle {
opacity: 1;
}
.aglaia-jewelry-wrapper .icon-bar.bar-bottom {
margin-top: 20px;
transform: rotate(0deg);
}
.aglaia-jewelry-wrapper .menu-toggle:checked + .icon-bars .icon-bar {
transition: all 0.3s ease;
}
.aglaia-jewelry-wrapper .menu-toggle:checked + .icon-bars .bar-top {
margin-top: 0 !important;
transform: rotate(45deg);
}
.aglaia-jewelry-wrapper .menu-toggle:checked + .icon-bars .bar-middle {
opacity: 0;
}
.aglaia-jewelry-wrapper .menu-toggle:checked + .icon-bars .bar-bottom {
margin-top: 0 !important;
transform: rotate(-45deg);
}
.aglaia-jewelry-wrapper .menu-overlay {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 0;
visibility: hidden;
opacity: 0;
overflow-y: scroll;
transition: all 0.3s ease-in-out;
}
.aglaia-jewelry-wrapper .menu-toggle:checked ~ .menu-overlay {
z-index: 1900;
visibility: visible;
opacity: 1;
transition: all 0.3s ease-in-out;
}
.aglaia-jewelry-wrapper .menu-overlay .menu-content {
width: 100%;
margin: auto;
}
.aglaia-jewelry-wrapper .content-type-menu ul {
list-style: none;
margin: 0;
padding: 0;
}
.aglaia-jewelry-wrapper .content-type-menu a {
display: block;
font-size: 50px;
font-weight: 400;
text-transform: uppercase;
line-height: 2em;
letter-spacing: 3px;
}
.aglaia-jewelry-wrapper .menu-overlay-title,
.aglaia-jewelry-wrapper .menu-overlay-email {
text-align: center;
}
<div class="aglaia-jewelry-wrapper">
<input type="checkbox" id="aglaia-menu-toggle" class="menu-toggle">
<label class="icon-bars" for="aglaia-menu-toggle" id="aglaia-menu-toggle-icon">
<span class="icon-bar bar-top"></span>
<span class="icon-bar bar-middle"></span>
<span class="icon-bar bar-bottom"></span>
</label>
<div class="menu-overlay">
<div>
<div class="menu-overlay-title">
<?php echo $additional_settings['nav_title']; ?>
</div>
<div class="menu-overlay-items">
<?php echo $content_html; ?>
</div>
<div class="menu-overlay-email">
<a href="mailto:<?php echo $additional_settings['contact_email']; ?>">
<?php echo $additional_settings['contact_email']; ?>
</a>
</div>
</div>
</div>
</div>
我尝试过的事情:
var fixed = document.getElementsByTagName('body');
fixed.addEventListener('touchmove', function(e) {
e.preventDefault();
}, false);
我在下面附有屏幕截图:
the menu open with no scroll down
scroll down the menu and close button disappeared on right top
您可以在iPhone Safari上访问https://aglaia.tech/agltest/shop/,以查看实际效果。
任何帮助将不胜感激!
问候 艾伦