Параллакс Изображение масштабируется

Question

У меня две проблемы, первая проблема, когда открытие моего бокового меню на моем веб-сайте масштабирует с ним фоновое изображение, это можно увидеть здесь:

Вот несколько быстрых изображений того, что происходит :

Без навигационной панели: https://drive.google.com/open?id=1UlpXuNalQLQlsR68ww3lvv17YCWfrLEZ

С навигационной панелью: https://drive.google.com/open?id=17TrBja9MRNX1vgs3b-NjQR_15-1mEn0E

Мое фоновое изображение параллакса: незначительное масштабирование с помощью моей боковой панели, даже если для нее задано «background-attachment: fixed;»

Вторая проблема заключается в том, что фактическая навигационная панель в мобильном представлении прозрачна, что опять-таки видно в представленной images.

У кого-нибудь есть идеи?

Я довольно новичок в HTML и CSS, поэтому, пожалуйста, извините код спагетти:)

index. html

* {
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
  opacity: 1;
}

body {
  height: 100%;
  margin: 0;
  font-size: 16px;
  font-family: "Comic Sans MS", cursive, sans-serif;
  color: #8e44ad;
}

.parallax {
  z-index: -100;
  background: url('img/parallax2.jpg') no-repeat center;
  background-color: #2c3e50;
  background-size: cover;
  background-attachment: fixed;
  height: 120vh;
  opacity: 0.6;
}

nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  min-height: 8vh;
  background-color: #2c3e50;
  text-transform: uppercase;
  font-family: 'Muli', sans-serif;
  user-select: none;
}

.logo {
  color: #ecf0f1;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 22px;
  font-weight: 500;
  font-family: 'Muli', sans-serif;
  cursor: default;
}

.avatarContainer img {
  width: 30%;
  height: 30%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  background: none;
  border-radius: 50%;
}

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

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

.nav-links a {
  color: #ecf0f1;
  text-decoration: none;
  letter-spacing: 3px;
  font-weight: 500;
  font-size: 14px;
  transition: color 100ms ease;
}

.nav-links a:hover {
  color: #bdc3c7;
}

.stack-menu {
  display: none;
  cursor: pointer;
}

.stack-menu div {
  width: 40px;
  height: 4px;
  background-color: #ecf0f1;
  margin: 7px;
  opacity: 100;
  transition: transform 300ms ease-out, opacity 300ms ease;
}

@media screen and (min-width:1200px) {
  .nav-links {
    width: 60%;
  }
}

@media screen and (max-width:800px) {
  body {
    overflow-x: hidden;
  }
  .nav-links {
    position: absolute;
    right: 0px;
    height: 92vh;
    top: 8vh;
    background-color: #2c3e50;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 55%;
    opacity: 1;
    transition: transform 400ms ease-out;
    transform: translateX(100%);
  }
  .nav-links li {
    opacity: 0;
  }
  .stack-menu {
    display: block;
  }
}

.nav-active {
  transform: translateX(0%);
}

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

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

.toggle .line2 {
  transform: translateX(30px);
  opacity: 0;
}

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

<link href="https://fonts.googleapis.com/css?family=Muli&display=swap" rel="stylesheet">

<nav>
  <div class="logo">
    <h4>Rocky</h4>
  </div>
  <ul class="nav-links">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Projects</a></li>
    <li><a href="#">Hire Me</a></li>
  </ul>

  <div class="stack-menu">
    <div class="line1"></div>
    <div class="line2"></div>
    <div class="line3"></div>
  </div>
  <script src="nav.js"></script>
</nav>

<div class="imgcontainer">
  <div class="parallax"></div>
</div>

<div class="avatarContainer">
  <img src="img/garfeld.gif" alt="Avatar">
</div>

<div class="textContainer">
  <p>Lorem ipsum dolor sit amet</p>
</div>

Затем у меня есть простой скрипт navbar, который просто меняет класс, используемый navbar, на класс перехода, чтобы показать его.