时间戳

首页 > 解决方案 > 如何修复在主要部分下溢出的隐藏导航？

javascript - 如何修复在主要部分下溢出的隐藏导航？

问题描述

我的隐藏导航应该保留在主要部分下方，当向下滚动页面时会溢出。

我已将我的主要部分设置为 min-height: 100vh，带有背景颜色和 z-index，所以我不明白为什么这仍然会溢出。

nav {
  position:  fixed;
  top:  0;
  right:  0;
  width: 300px;
  height: 100%;
  background-color: #ff5000;
  color: #fbf9f9;
  font-family:  "Anx Regular";
  font-size:  28px;
  display:  flex;
  flex-direction: column;
  justify-content:  center;
}

main {
  position: relative;
  z-index: 1;
  background-color: #fbf9f9;
  min-height: 100vh;
  transition: transform 0.8s;
}

main.open {
  transform: translate(-300px, 0);
}

const toggleTag = document.querySelector("a.toggle-nav")
const mainTag = document.querySelector("main")

toggleTag.addEventListener("click", function() {
  mainTag.classList.toggle("open")

  if (mainTag.classList.contains("open")) {
    toggleTag.innerHTML = `<img src="close.svg">`
    toggleTag.style.width = "30px"
  } else {
    toggleTag.innerHTML = `<img src="menu.svg">`
    toggleTag.style.width = "30px"
  }

https://anx.superhi.com/workshops.html

标签： javascripthtmlcss

解决方案

100vh 表示它正在显示的窗口的全高（例如 800 像素），所以这不是您解决问题所需要的。您设置了一个位置：固定到导航，因此即使您向下滚动，它也始终位于屏幕的右上角。如果您需要它仅在您位于页面顶部时显示，请尝试切换到绝对位置。

推荐阅读