javascript - 使用 Javascript 切换的导航栏汉堡的响应式下拉菜单适用于 Chrome、Firefox，但不适用于 Safari

Question

我正在使用 Javascript 中的切换创建响应式导航栏。向下滚动 70vh 后出现导航栏。在最大宽度为 768 像素时，响应能力开始发挥作用，单击时会出现带有下拉菜单的汉堡。

在 Chrome 和 Firefox 中一切正常——当手动调整浏览器的大小和使用浏览器的移动设备模拟器时。但在 Safari 和实际移动设备(iPad、iPhone 7、iPhone 5)中，导航栏与汉堡一起出现，当我单击汉堡时，它会按预期转换为“X”，但下拉菜单不会出现。

编辑澄清:如果您查看下面的代码片段，这就是应该发生的情况。这在 Chrome 和 Firefox 中确实会发生，但在实际的移动设备上不会。相反，在移动设备上，当我按下汉堡时，它会变成一个“X”，但下拉菜单不会滑到屏幕上。

我花了一天多的时间试图弄清楚发生了什么。我的 HTML head 具有适合移动设备宽度的元标记，并且我已尝试为 CSS 中的每个动画、变换、过渡和关键帧使用适当的 -moz、-webkit、-o 属性。我找不到解决办法。有人请给我一件救生衣，我正在下沉。

这是我的代码:

const navSlide = () => {
  const burger = document.querySelector('.burger');
  const nav = document.querySelector('.nav-links');
  const navLinks = document.querySelectorAll('.nav-links li');
  // Toggle Nav
  burger.addEventListener('click', () => {
    nav.classList.toggle('nav-active');
  //Animate Links
    navLinks.forEach((link, index) => {
      if (link.style.animation) {
        link.style.animation = ''
      } else {
        link.style.animation = `navLinkFade 0.5s ease forwards ${index / 5 + 0.5}s`;
    }
  });
  // Burger Animation
  burger.classList.toggle('toggle');
  });
}

navSlide();

// navbar appears after scrolling
let navbar = document.querySelector(".header-navigation");
if (navbar) {
  window.addEventListener("scroll", () => {
    if (window.scrollY >= window.innerHeight - 70) {
      navbar.classList.add('navbar-show');
    } else {
      navbar.classList.remove('navbar-show')
    }
  });
}

body {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  cursor: pointer;
}

.header-navigation {
  opacity: 0;
}

.wrapper {
  z-index: 1;
  position: relative;
}

.navbar-show {
  opacity: 1;
  transition: .4s ease-in-out;
  position: fixed;
  top: 0;
  width: 100%;
  height: 10vh;
  color: black;
  background-color: #5D4954;
  text-align: right;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 4px 12px 0px;
  font-family: 'Muli', sans-serif;
  font-weight: 600;
  overflow: hidden;
  z-index: 9999;
  cursor: pointer;
}

nav {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-around;
  justify-content: space-around;
  -webkit-align-items: center;
  align-items: center;
  height: 10vh;
  font-family: 'Muli', sans-serif;
  background-color: white;
  transition: .4s ease-in-out;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 4px 12px 0px;
  cursor: pointer;
}

.logo {
  text-transform: uppercase;
  letter-spacing: 5px;
  font-size: 20px;
  color: black;
}

.nav-links {
  display: flex;
  justify-content: space-around;
  width: 40%;
  cursor: pointer;
}

.nav-links li {
  list-style: none;
  cursor: pointer;
}

.nav-links a {
  text-decoration: none;
  color: black;
  letter-spacing: 3px;
  font-size: 14px;
  display: block;
  cursor: pointer;
/*  font-weight: bold; */
}

.burger {
  display: none;
}

.burger div{
  width: 25px;
  height: 3px;
  background-color: black;
  margin: 5px;
  transition: all 0.3s ease;
  cursor: pointer;
}

@media screen and (max-width: 1024px){
  .nav-links {
    width: 50%;
  }
}

@media screen and (max-width: 768px){
  body{
/*    overflow-x: hidden;
*/  }
  .nav-links {
    position: fixed;
    right: 0;
    height: 92vh;
    top: 8vh;
    background-color: #5D4954;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: center;
    align-items: center;
    width: 50%;
      -webkit-transform: translateX(100%);
      -moz-transform: translateX(100%);
      -o-transform: translateX(100%);
    transform: translateX(100%);
      -webkit-transition: transform 0.5s ease-in;
      -moz-transition: transform 0.5s ease-in;
      -o-transition: transform 0.5s ease-in;
    transition: transform 0.5s ease-in;
    cursor: pointer;
  }
  .nav-links li {
    opacity: 0;
    -webkit-animation: navLinkFade 0.5s ease forwards 1s;
    -moz-animation: navLinkFade 0.5s ease forwards 1s;
    -o-animation: navLinkFade 0.5s ease forwards 1s;
    -ms-animation: navLinkFade 0.5s ease forwards 1s;
    animation: navLinkFade 0.5s ease forwards 1s;
    cursor: pointer;
  }
  .burger {
    display: block;
    cursor: pointer;
  }
}

.nav-active {
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
  cursor: pointer;
/*  z-index: 9999;
  position: relative;*/
}

@-webkit-keyframes navLinkFade {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0px);
  }
}

@-moz-keyframes navLinkFade {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0px);
  }
}

@-o-keyframes navLinkFade {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0px);
  }
}

@keyframes navLinkFade {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0px);
  }
}

.toggle .line1 {
  transform: rotate(-45deg) translate(-5px, 6px);
}

.toggle .line2 {
  opacity: 0;
}

.toggle .line3 {
  transform: rotate(45deg) translate(-5px, -6px);
}

.banner {
  height: 100vh;
  background: grey;
  color: black;
  position: relative;
  text-align: center;
}

.banner h1 {
  padding-top: 300px;
}

.container1 {
  height: 92vh;
  background: white;
  color: black;
  position: relative;
  text-align: center;
  z-index: 2;
}

.container2 {
  height: 92vh;
  background: grey;
  color: black;
  position: relative;
  text-align: center;
  z-index: 3;
}

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>NAVIGATIOn</title>
    <link href="https://fonts.googleapis.com/css?family=Muli:200,300,400,600,700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <div class="header-navigation">
      <nav class="nav">
        <div class="logo">
          <h4>NAV</h4>
        </div>
        <ul class="nav-links">
            <li><a href="#">Why a Website?</a></li>
            <li><a href="#">About Me</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
        <div class="burger">
          <div class="line1"></div>
          <div class="line2"></div>
          <div class="line3"></div>
        </div>
      </nav>
    </div>

    <div class="banner">
      <h1>Banner</h1>
    </div>
    <div class="container1">
      <h1>Container1</h1>
    </div>
    <div class="container2">
      <h1>Container2</h1>
    </div>
    <script src="javascript.js"></script>
  </body>
</html>

Answer 1

溢出似乎搞砸了。尽量不要在你的 .navbar-show 中使用 overflow-hidden 🧐

这是一个 JSFiddle:https://jsfiddle.net/RomanVanLoo/5ohva732/6/

body {


margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  cursor: pointer;
}

.header-navigation {
  opacity: 0;
}

.wrapper {
  z-index: 1;
  position: relative;
}

.navbar-show {
  opacity: 1;
  transition: .4s ease-in-out;
  position: fixed;
  top: 0;
  width: 100%;
  height: 10vh;
  color: black;
  background-color: #5D4954;
  text-align: right;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 4px 12px 0px;
  font-family: 'Muli', sans-serif;
  font-weight: 600;
  z-index: 9999;
  cursor: pointer;
}

nav {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-around;
  justify-content: space-around;
  -webkit-align-items: center;
  align-items: center;
  height: 10vh;
  font-family: 'Muli', sans-serif;
  background-color: white;
  transition: .4s ease-in-out;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 4px 12px 0px;
  cursor: pointer;
}

.logo {
  text-transform: uppercase;
  letter-spacing: 5px;
  font-size: 20px;
  color: black;
}

.nav-links {
  display: flex;
  justify-content: space-around;
  width: 40%;
  cursor: pointer;
}

.nav-links li {
  list-style: none;
  cursor: pointer;
}

.nav-links a {
  text-decoration: none;
  color: black;
  letter-spacing: 3px;
  font-size: 14px;
  display: block;
  cursor: pointer;
/*  font-weight: bold; */
}

.burger {
  display: none;
}

.burger div{
  width: 25px;
  height: 3px;
  background-color: black;
  margin: 5px;
  transition: all 0.3s ease;
  cursor: pointer;
}

@media screen and (max-width: 1024px){
  .nav-links {
    width: 50%;
  }
}

@media screen and (max-width: 768px){
  body{
/*    overflow-x: hidden;
*/  }
  .nav-links {
    position: fixed;
    right: 0;
    height: 92vh;
    top: 8vh;
    background-color: #5D4954;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: center;
    align-items: center;
    width: 50%;
      -webkit-transform: translateX(100%);
      -moz-transform: translateX(100%);
      -o-transform: translateX(100%);
    transform: translateX(100%);
      -webkit-transition: transform 0.5s ease-in;
      -moz-transition: transform 0.5s ease-in;
      -o-transition: transform 0.5s ease-in;
    transition: transform 0.5s ease-in;
    cursor: pointer;
  }
  .nav-links li {
    opacity: 0;
    -webkit-animation: navLinkFade 0.5s ease forwards 1s;
    -moz-animation: navLinkFade 0.5s ease forwards 1s;
    -o-animation: navLinkFade 0.5s ease forwards 1s;
    -ms-animation: navLinkFade 0.5s ease forwards 1s;
    animation: navLinkFade 0.5s ease forwards 1s;
    cursor: pointer;
  }
  .burger {
    display: block;
    cursor: pointer;
  }
}

.nav-active {
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
  cursor: pointer;
/*  z-index: 9999;
  position: relative;*/
}

@-webkit-keyframes navLinkFade {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0px);
  }
}

@-moz-keyframes navLinkFade {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0px);
  }
}

@-o-keyframes navLinkFade {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0px);
  }
}

@keyframes navLinkFade {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0px);
  }
}

.toggle .line1 {
  transform: rotate(-45deg) translate(-5px, 6px);
}

.toggle .line2 {
  opacity: 0;
}

.toggle .line3 {
  transform: rotate(45deg) translate(-5px, -6px);
}

.banner {
  height: 100vh;
  background: grey;
  color: black;
  position: relative;
  text-align: center;
}

.banner h1 {
  padding-top: 300px;
}

.container1 {
  height: 92vh;
  background: white;
  color: black;
  position: relative;
  text-align: center;
  z-index: 2;
}

.container2 {
  height: 92vh;
  background: grey;
  color: black;
  position: relative;
  text-align: center;
  z-index: 3;
}