为什么我的下拉导航溢出：隐藏阻止页面等于导航的高度？

Question

height blocking website这是在等于 phone 的屏幕尺寸上工作时。我真的不知道如何让这个导航的高度不阻塞我网站的任何其他元素。例如，如果我在按钮所在的位置向下滚动，由于导航的高度，即使它没有展开，我也无法单击它。

任何帮助或指点将不胜感激。

谢谢

编辑：我添加了一张图片来显示下拉高度如何遮挡部分网站。一旦我向下滚动到足够远，我就无法点击按钮。

<header>
  <nav>
   <ul class="nav-links">
    <li><a href="index.html">home</a></li>
    <li><a href="shop.html">shop</a></li>
    <li><a href="sport.html">sport</a></li>
    <li><a href="read.html">read</a></li>
    <li><a href="explore.html">explore</a></li>
    <li><a href="about.html">about</a></li>
   </ul>
  </nav>
 </header>

header {
    z-index: 999;
    position: fixed;
    width: 100vw;
    height: 75px;
    background-image: linear-gradient(to top, rgba(255,255,255,0), rgba(63, 63, 63, 0.65));
}

nav {
  width: 100vw;
  height: 55vh;
  overflow: hidden;
  left: 0;
  margin-top: 29px;
}

nav .nav-links {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  opacity: 1;
  /* only to show when class is added */
  background-color: black;
  margin: 0;
  padding: 0;
  padding-top: 15px;
  list-style: none;
  overflow: hidden;
  -webkit-transition: -webkit-transform 1s;
  transition: -webkit-transform 1s;
  transition: transform 1s;
  transition: transform 1s, -webkit-transform 1s;
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: auto;
  height: auto;
  padding: 5px;
  margin: 5px;
}

nav a {
  text-decoration: none;
  color: white;
  font-size: 24px;
  font-weight: 700;
}

.nav-links.is-active {
  opacity: 1;
  /*only shows when class is added */
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

const revealNav = () => {
  const hamburger = document.querySelector('.hamburger');
  const nav = document.querySelector('.nav-links');

  hamburger.addEventListener('click', () => {
    hamburger.classList.toggle('is-active');
  }, false);

  hamburger.addEventListener('click', () => {
    nav.classList.toggle('is-active');
  });
}

revealNav();

Answer 1

您的 header 职位已确定。这意味着 header 之外的所有元素将落在 'underneath' 这个 header...

如果你能举一个真实世界的例子，可能会更好地理解你的问题。

它是 header 上的 position: fixed 与 header 和导航上的固定 height 的混合体。下面的示例或多或少可以解决您的问题。通过一些媒体查询和额外的逻辑，它应该适合你。

const revealNav = () => {
  const hamburger = document.querySelector('.hamburger');
  const nav = document.querySelector('nav');
  const navLinks = document.querySelector('.nav-links');

  hamburger.addEventListener('click', () => {
    hamburger.classList.toggle('is-active');
  }, false);

  hamburger.addEventListener('click', () => {
    navLinks.classList.toggle('is-active');
    nav.classList.toggle('is-active');
  });
}

revealNav();

header {
    z-index: 999;
    position: relative;
    width: 100vw;
    background-image: linear-gradient(to top, rgba(255,255,255,0), rgba(63, 63, 63, 0.65));
}

nav {
  width: 100vw;
  overflow: hidden;
  left: 0;
  margin-top: 29px;
  height: 0;
  transition: height ease-in-out .5s;
}
nav.is-active {
  height: 55vh;
  height: auto;
}

nav .nav-links {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  opacity: 1;
  /* only to show when class is added */
  background-color: black;
  margin: 0;
  padding: 0;
  padding-top: 15px;
  list-style: none;
  overflow: hidden;
  -webkit-transition: -webkit-transform 1s;
  transition: -webkit-transform 1s;
  transition: transform 1s;
  transition: transform 1s, -webkit-transform 1s;
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: auto;
  height: auto;
  padding: 5px;
  margin: 5px;
}

nav a {
  text-decoration: none;
  color: white;
  font-size: 24px;
  font-weight: 700;
}

.nav-links.is-active {
  opacity: 1;
  /*only shows when class is added */
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

<header>
  <button class="hamburger">
    menu
  </button>
  <nav>
   <ul class="nav-links">
    <li><a href="index.html">home</a></li>
    <li><a href="shop.html">shop</a></li>
    <li><a href="sport.html">sport</a></li>
    <li><a href="read.html">read</a></li>
    <li><a href="explore.html">explore</a></li>
    <li><a href="about.html">about</a></li>
   </ul>
  </nav>
 </header>

<div style="height: 500px; background-color: blue; position: relative;">
  <button>submit</button
</div>

为什么我的下拉导航溢出：隐藏阻止页面等于导航的高度？

Why is my dropdown nav with overflow: hidden blocking the page equal to the height of the nav?

html

javascript

css

sass

responsive-design