我有一个高度为 100% 的固定侧边导航菜单。当您单击 Angular 落的汉堡包时，它的宽度会设置为 15%-100%，具体取决于您的窗口大小。当您单击 x 时，它的宽度设置为 0。百分比是相对于主体设置的。在我添加内容以便滚动之前，这似乎工作得很好。当您向下滚动然后打开/关闭侧边导航时，它会将您带回到页面顶部。
我对 JavaScript 不是很熟悉，所以这里面可能有问题。我搜索了 Google 和 StackOverflow，但没有找到任何东西。我可能没有在寻找正确的问题。我尝试将所有百分比更改为 vh 和 vw，但没有任何改变。我也不认为这是浏览器问题(我使用的是 Chrome)，因为我也在 Microsoft Edge 中尝试过，结果相同。
<body onresize="WindowResize()">
<!--side-menu-->
<nav class="navbar">
<span class="open-Slide">
<a href="#" onclick="openSlideMenu()">
<span id="hamburger" class="icon-menu"></span> /*an Icon font I have downloaded*/
</a>
</span>
<div id="side-menu">
<a href="#" class="btn-close" onclick="closeSlideMenu()">×</a>
<a href="#">Home</a>
<a href="#">Portfolio</a>
<a href="#">Blog</a>
</div>
</nav>
<!--end of side-menu-->
//side-menu script
var sideMenuWidth;
var sideMenuIsActive = true;
window.onload = function() {
if (window.innerWidth > 1143) {
sideMenuWidth = '15%';
}else{
sideMenuWidth = '100%';
}
}
function openSlideMenu () {
document.getElementById('side-menu').style.width = sideMenuWidth;
sideMenuIsActive = true;
}
function windowResize() {
if (window.innerWidth > 1143) {
sideMenuWidth = '15%';
if (sideMenuIsActive == true) {
document.getElementById('side-menu').style.width = sideMenuWidth;
}
}else{
sideMenuWidth = '100%';
if (sideMenuIsActive == true) {
document.getElementById('side-menu').style.width = sideMenuWidth;
}
}
}
function closeSlideMenu() {
document.getElementById('side-menu').style.width = '0';
sideMenuIsActive = false;
}
//end of side-menu script
#side-menu {
width:15%;
z-index: 1;
transition: 0.5s;
top:0;
left:0;
background-color: black;
height: 100%;
position: fixed;
}
#hamburger {
display: absolute;
top: 0;
left:0;
margin: 1rem 0 0 1rem;
position: fixed;
color: black;
}
非常感谢任何帮助!
最佳答案
如果你需要交互元素，但不需要href属性使用 <button>元素，并为此元素应用所需的 CSS。从可访问性的 Angular 来看，这是更好的选择。
关于javascript - 为什么我打开固定导航菜单时会转到页面顶部？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58781576/