导航打开时正文向下移动 (CSS, Javascript)

Question

我正在尝试为站点创建全尺寸导航菜单。我的问题是当我打开它时标签会向下移动，所以我无法在页面上正确定位它。它并不完全位于页面顶部。在下面你可以看到我的代码。菜单应覆盖整个屏幕，并且在打开时不应移动。如果有人能帮助我，我将不胜感激。

index.html

<body>
        <div class="nav" id="nav">
                <a href="javascript:void(0)" class="close" onclick="closeNav()">&times;</a>
                <a href="#">Home</a>
                <a href="#">About</a>
                <a href="#">Gallery</a>
                <a href="#">Contact</a>

              </div>

              <span id="open" class="open" onclick="openNav()">&#9776</span>
    <div class="content-wrapper">


    <div class="header-team">

        <img src="img/smoke_team.png">

      </div>
    </div>
      <script src="js/script.js"></script>
</body>

style.scss

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800');

$main-font: 'Open Sans';

html,body {
    padding: 0px;
    margin: 0px;
    width: 100%;
    box-sizing: border-box;
}

body {
    background-color: #000;
}

.header-team {
    display: flex;
    background-image: url("../img/teamimg.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 200px 0px;
    height: 400px;
    width: 100%;
    margin: 8em auto 0em auto;
    animation-name: move-in;
    animation-duration: 3s;
    animation-fill-mode: forwards;
    opacity: 0.75;
    justify-content: center;
    z-index: 1;
}

@keyframes move-in {
    from {
        background-position: 200px 0px;
    }
    to {
        background-position: top;
    }
}

.header-team img {
    align-self: center;
    width: 1000px;
    opacity: 0;
    margin-right: 200px;
    animation-name: move-smoke;
    animation-duration: 5s;
    animation-fill-mode: forwards;
}

@keyframes move-smoke {
    from {
        margin-right: 200px;
    }
    to {
        margin-right: 0px;
    }
    from {
        opacity: 0;
    }
    to {
        opacity: 0.9;
    }
}



.open {
    color: grey;
    font-size: 30px;
    float: right;
    margin: 5.5em 1.3em 0em 0em;
    z-index: 99;
    display: block;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    }

    .open:hover {
        color: #a30000;
    }

  .nav {
    text-align: center;
    width: 0%;
    overflow-x: hidden;
    height: 100vh;
    z-index: 100;
    position: fixed;
    background-color: rgba(0, 0, 0, 0.6);
    transition: 0.3s;
    display: block;
  }

  .nav a {
    clear: right;
    color: white;
    font-size: 26px;
    display: block;
    text-decoration: none;
    padding: 1.5em 0;
    transition: 0.3s;
    font-family: $main-font;
  }

  .nav a:first-child {
      font-size: 45px;
      margin-bottom: -30px;
      margin-top: -40px;
  }

  .close {
    float: right;
    margin: 0em 1em 1em 1em;
  }

  .nav a:not(:first-child):hover {
    color: #a30000;
    transition: 0.5s;
  }

script.js

function openNav() {
    document.getElementById("open").style.display = "none";
    document.getElementById("nav").style.width = "100%";
  }

  function closeNav() {
    document.getElementById("nav").style.width = "0%";
    document.getElementById("open").style.display = "block";
  }

Answer 1

希望我正确理解了你的问题。

要使.nav覆盖整个屏幕而不移动，只需添加

top: 0;
left: 0;

到.nav风格。

布局发生变化是因为您正在更改 #open 跨度的 display 属性，这与页面上其他元素的位置相互作用。您可能正在寻找 visibility css 属性，它不会弄乱定位，只是说明元素是否可见。将 openNav() 和 closeNav() 中的相应行更改为

document.getElementById("open").style.visibility = "hidden";

和

document.getElementById("open").style.visibility = "visible";

Answer 2

希望你能答对

function openNav() {
    document.getElementById("open").style.display = "none";
    document.getElementById("nav").style.width = "100%";
  }

  function closeNav() {
    document.getElementById("nav").style.width = "0%";
    document.getElementById("open").style.display = "block";
  }

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800');

$main-font: 'Open Sans';

html,body {
    padding: 0px;
    margin: 0px;
    width: 100%;
    box-sizing: border-box;
}

body {
    background-color: #000;
}

.header-team {
    display: flex;
    background-image: url("../img/teamimg.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 200px 0px;
    height: 400px;
    width: 100%;
    margin: 8em auto 0em auto;
    animation-name: move-in;
    animation-duration: 3s;
    animation-fill-mode: forwards;
    opacity: 0.75;
    justify-content: center;
    z-index: 1;
}

@keyframes move-in {
    from {
        background-position: 200px 0px;
    }
    to {
        background-position: top;
    }
}

.header-team img {
    align-self: center;
    width: 1000px;
    opacity: 0;
    margin-right: 200px;
    animation-name: move-smoke;
    animation-duration: 5s;
    animation-fill-mode: forwards;
}

@keyframes move-smoke {
    from {
        margin-right: 200px;
    }
    to {
        margin-right: 0px;
    }
    from {
        opacity: 0;
    }
    to {
        opacity: 0.9;
    }
}



.open {
    color: grey;
    font-size: 30px;
    float: right;
    
    z-index: 99;
    display: block;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    }

    .open:hover {
        color: #a30000;
    }

  .nav {
    text-align: center;
    width: 0%;
    overflow-x: hidden;
    height: 100vh;
    z-index: 100;
    position: fixed;
    background-color: rgba(0, 0, 0, 0.6);
    transition: 0.3s;
    display: block;
  }

  .nav a {
    clear: right;
    color: white;
    font-size: 26px;
    display: block;
    text-decoration: none;
    padding: 1.5em 0;
    transition: 0.3s;
    font-family: $main-font;
  }

  .nav a:first-child {
      font-size: 45px;
      
  }

  .close {
    float: right;
    margin: -1em 1em -1em 0em;
  }

  .nav a:not(:first-child):hover {
    color: #a30000;
    transition: 0.5s;
  }

.nav {
  top: 0;
left: 0;
}

<body>
        <div class="nav" id="nav">
                <a href="javascript:void(0)" class="close" onclick="closeNav()">&times;</a>
                <a href="#">Home</a>
                <a href="#">About</a>
                <a href="#">Gallery</a>
                <a href="#">Contact</a>

              </div>

              <span id="open" class="open" onclick="openNav()">&#9776</span>
    <div class="content-wrapper">


    <div class="header-team">

        <img src="img/smoke_team.png">

      </div>
    </div>
      <script src="js/script.js"></script>
</body>

导航打开时正文向下移动 (CSS, Javascript)

Body moves down when Navigation opens (CSS, Javascript)

html

javascript

css

jquery-animate