title: Why does my navbar appear on top of scrollbar?
body: <p>I'm trying to create my first website with parallax effect. I noticed a problem with my fixed top navbar - it appears on top of the scrollbar and overflow hidden doesn't hide it. I've tried to put it into .main-container and it kinda solves my problem: it's not on the top of scrollbar anymore, however, it stops being top fixed. What causes this problem? How can I fix it?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;head&gt;
      &lt;link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"&gt;&lt;/link&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
      &lt;nav class="navbar navbar-light navbar-expand-lg" id="top-navbar"&gt;
          &lt;a class="navbar-brand" href="#"&gt;brand&lt;/a&gt;
  
          &lt;button class="navbar-toggler" id='nav-icon' type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"&gt;
                                              &lt;span&gt;&lt;/span&gt;
                                              &lt;span&gt;&lt;/span&gt;
                                              &lt;span&gt;&lt;/span&gt;
                                              &lt;span&gt;&lt;/span&gt;
                                          &lt;/button&gt;
  
          &lt;div class="collapse navbar-collapse" id="navbarSupportedContent"&gt;
              &lt;ul class="navbar-nav m-auto"&gt;
                  &lt;li class="nav-item"&gt;
                      &lt;a class="nav-link" href="#"&gt;link&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
              &lt;ul class="navbar-nav m-auto"&gt;
                  &lt;li class="nav-item"&gt;
                      &lt;a class="nav-link" href='#1'&gt;link 1&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="nav-item"&gt;
                      &lt;a class="nav-link" href='#2'&gt;link 2&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="nav-item"&gt;
                      &lt;a class="nav-link" href='#3'&gt;link 3&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="nav-item"&gt;
                      &lt;a class="nav-link" href='#4'&gt;link 4&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
  
              &lt;ul class="navbar-nav ml-auto mr-0"&gt;
                  &lt;li class="nav-item dropdown"&gt;
                      &lt;a class="nav-link dropdown-toggle" href="#" id="navbar-dropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;dropdown&lt;/a&gt;
  
                      &lt;div class="dropdown-menu" aria-labelledby="navbarDropdown"&gt;
                          &lt;a class="dropdown-item" href="#"&gt;link&lt;/a&gt;
  
                          &lt;a class="dropdown-item" href="#"&gt;link&lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/nav&gt;
  
      &lt;div class='main-container'&gt;
  
          &lt;div class="parallax-container"&gt;
  
              &lt;div&gt;
                  &lt;h1&gt;title&lt;/h1&gt;
              &lt;/div&gt;
              &lt;a href="#1" id='main-anchor'&gt;
                  &lt;i class="large material-icons" style="font-size: 5rem" id='goto-icon'&gt;
                      keyboard_arrow_down
                  &lt;/i&gt;
              &lt;/a&gt;
          &lt;/div&gt;
  
          &lt;div id="wrapper" class='content-container'&gt;
  
              &lt;div id="page-content" class="page content"&gt;
  
                  &lt;span class="anchor" id="1"&gt;&lt;/span&gt;
  
                  &lt;section class="card text-white bg-dark mb-5"&gt;
                      &lt;h4 class="card-header"&gt;Title&lt;/h4&gt;
  
                      &lt;div class="card-body"&gt;
                          &lt;p class="card-text"&gt;
                              Some quick example text to build on the card title and make up the bulk of the card's content.
                          &lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/section&gt;
  
                  &lt;span class="anchor" id="2"&gt;&lt;/span&gt;
  
                  &lt;section class="card text-white bg-dark mb-5"&gt;
                      &lt;h4 class="card-header"&gt;Title&lt;/h4&gt;
  
                      &lt;div class="card-body"&gt;
                          &lt;p class="card-text"&gt;
                              Some quick example text to build on the card title and make up the bulk of the card's content.
                          &lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/section&gt;
  
                  &lt;span class="anchor" id="3"&gt;&lt;/span&gt;
  
                  &lt;section class="card text-white bg-dark mb-5"&gt;
                      &lt;h4 class="card-header"&gt;Title&lt;/h4&gt;
  
                      &lt;div class="card-body"&gt;
                          &lt;p class="card-text"&gt;
                              Some quick example text to build on the card title and make up the bulk of the card's content.
                          &lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/section&gt;
  
                  &lt;span class="anchor" id="4"&gt;&lt;/span&gt;
  
                  &lt;section class="card text-white bg-dark mb-5"&gt;
                      &lt;h4 class="card-header"&gt;Title&lt;/h4&gt;
  
                      &lt;div class="card-body"&gt;
                          &lt;p class="card-text"&gt;
                              Some quick example text to build on the card title and make up the bulk of the card's content.
                          &lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/section&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p>SCSS</p>
  
  <pre><code>// COLORS
  $darker: #212529;
  $dark: #35383C;
  $gray: #605F5E;
  $greenish: #0F5158;
  $lightgreen: #21686E;
  $blue: #7FA5A6;
  $lightblue: #96B5B6;
  $alabaster: #F1EBE1;
  $gainsboro: #CEE0DC;
  // SITE
  body {
      font-family: sans-serif;
      background-color: $darker;
      scroll-behavior: smooth;
  }
  
  .main-container {
      perspective: 1px;
      transform-style: preserve-3d;
      height: 100vh;
      overflow-x: hidden;
      overflow-y: scroll;
      background-color: $darker;
      a {
          &amp;:link,
          &amp;:visited,
          &amp;:hover,
          &amp;:active {
              color: white;
          }
      }
  }
  
  .content-container {
      position: relative;
      display: block;
      z-index: 1;
      background-color: $darker;
      min-height: 100vh;
  }
  
  .content {
      margin: 0 auto;
      padding: 75px 0;
  }
  
  .parallax-container {
      color: white;
      left: -9px;
      display: flex;
      flex: 1 0 auto;
      flex-direction: column;
      position: relative;
      z-index: -1;
      height: 100vh;
      width: 101vw;
      justify-content: center;
      align-items: center;
      transform: translateZ(-1px) scale(2);
      background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.1));
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
  }
  
  // NAVBAR
  #top-navbar {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      font-size: 1rem;
      z-index: 30;
      line-height: 150%;
      background-color: rgba(33, 37, 41, 0.1);
      padding: 0 2.5vw;
      transition: transform 1s .3s ease;
      box-shadow: 0 1px 50px -28px $blue;
      &amp;.dark {
          background: $darker;
      }
      &amp;.dark-show {
          background: $darker;
      }
      &amp;.scrollUp {
          transform: translateY(-100%);
      }
      * {
          color: #bbccdd !important;
          font-weight: 500;
      }
      .navbar-brand {
          font-size: 1.5rem;
          font-weight: 600;
          padding: 0;
      }
      .nav-item {
          text-transform: uppercase;
          padding: 0 8px;
          cursor: pointer;
          // &amp;:hover:not(.dropdown) {
          //     background-color: rgba(33, 37, 41, 1);
          // }
          a:hover {
              color: white !important;
          }
      }
      .nav-link {
          margin: 10px 0;
          &amp;.active {
              color: white !important;
              border-bottom: 1px solid white;
          }
      }
      .dropdown-menu {
          border-color: $blue;
          line-height: 2rem;
          background-color: rgba(0, 0, 0, 0.1);
          .dropdown-divider {
              margin: 0;
              border-top: 2px solid black;
          }
          .dropdown-item:hover {
              color: white;
              background-color: rgba(33, 37, 41, 0.1);
          }
      }
      .navbar-toggler {
          color: $blue;
      }
  }
  
  // HAMBURGER
  #nav-icon {
      width: 30px;
      height: 30px;
      position: relative;
      margin: 0;
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
      -webkit-transition: .5s ease-in-out;
      -moz-transition: .5s ease-in-out;
      -o-transition: .5s ease-in-out;
      transition: .5s ease-in-out;
      cursor: pointer;
  }
  
  #nav-icon span {
      display: block;
      position: absolute;
      height: 3px;
      width: 100%;
      background: $blue;
      border-radius: 3px;
      opacity: 1;
      left: 0;
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
      -webkit-transition: .25s ease-in-out;
      -moz-transition: .25s ease-in-out;
      -o-transition: .25s ease-in-out;
      transition: .25s ease-in-out;
  }
  
  #nav-icon span:nth-child(1) {
      top: 1px;
  }
  
  #nav-icon span:nth-child(2),
  #nav-icon span:nth-child(3) {
      top: 13px;
  }
  
  #nav-icon span:nth-child(4) {
      bottom: 0px;
  }
  
  #nav-icon.open span:nth-child(1) {
      top: 15px;
      width: 0%;
      left: 50%;
  }
  
  #nav-icon.open span:nth-child(2) {
      -webkit-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
      -o-transform: rotate(45deg);
      transform: rotate(45deg);
  }
  
  #nav-icon.open span:nth-child(3) {
      -webkit-transform: rotate(-45deg);
      -moz-transform: rotate(-45deg);
      -o-transform: rotate(-45deg);
      transform: rotate(-45deg);
  }
  
  #nav-icon.open span:nth-child(4) {
      top: 15px;
      width: 0%;
      left: 50%;
  }
  
  // CONTENT
  #page-content {
      height: 100vh !important;
      padding: 15vh 10vw 5vh 10vw;
      margin: 0;
  }
  
  .anchor {
      display: block;
      height: 15vh;
      margin-top: -15vh;
      visibility: hidden;
  }
  
  // MEDIA QUERIES
  @media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
      #sidebar {
          display: none;
      }
      #page-content {
          margin: 0;
      }
  }
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$(document).ready(function() {
      $('#sidebar').css('transform', 'translateX(200px)')
      $('#nav-icon').click(function() {
          // $(this).toggleClass('open');
          $('#top-navbar').toggleClass('dark-show');
      });
      $('.main-container').scroll(function() {
          let pageHeight = $('.main-container').height();
          $('#top-navbar').toggleClass('dark', $(this).scrollTop() &gt; pageHeight);
          $('section').each(function(i) {
              var position = $(document).scrollTop();
              var header = $('#top-navbar').outerHeight();
              if ($(this).position().top &lt;= (position + header)) {
                  var top = $(this).position().top;
                  console.log($(this).position().top &lt;= (position + header));
                  $(".nav-link.active").removeClass('active');
                  $(".nav-link").eq(i).addClass('active');
              }
          })
      });
      $('.nav-link').on('click', function() {
          $('.nav-link').removeClass('active');
          $(this).addClass('active');
      });
  });
  
  document.querySelectorAll('a[href^="#"]').forEach(anchor =&gt; {
      anchor.addEventListener('click', function(e) {
          e.preventDefault();
  
          document.querySelector(this.getAttribute('href')).scrollIntoView({
              behavior: 'smooth'
          });
      });
  });
  
  let width = $(window).width();
  let height = $(window).height();
  
  if (height &gt; width &amp;&amp; height &lt; 1024) {
      let position = $('#page-content').scrollTop();
  
      $('.main-container').scroll(function() {
          let scroll = $('.main-container').scrollTop();
          if (scroll &gt; position) {
              $('#top-navbar').addClass('scrollUp');
          } else {
              $('#top-navbar').removeClass('scrollUp');
          }
          position = scroll;
      });
  }
  </code></pre>
  
  <p>Link to jsfiddle: <a href="https://jsfiddle.net/strzesia/fhqok4ym/19/" rel="nofollow noreferrer">https://jsfiddle.net/strzesia/fhqok4ym/19/</a></p>