Непонятный баг с сайдбаром на сайте

Всем привет. Появилась такая проблема на сайте при верстке, сайдбар на сайте находится в правой части, на нем только меню категорий. Если опустится на самый низ сайта, провести по пагинации и быстро подняться вверх, то сайдбар перекрывает header(и если подвигать мышкой, то все возвращается как было), что странно, потому что у header стоит z-index: 100, а у сайдбара 1. (и еще, для цвета сайдбара я использую псевдокласс after)

Вот css код header и сайдбара:

#header {
  height: 70px;
  background-color: #0c1013;
  -webkit-box-shadow: 0 0 19px 2px rgba(0,0,0,.91);
  box-shadow: 0 0 19px 2px rgba(0,0,0,.91);
  position: relative;
  z-index: 100!important
}
#sidebar::after {
  content: " ";
  -webkit-box-shadow: 0 0 8px 1px rgba(0,0,0,.54);
  box-shadow: 0 0 8px 1px rgba(0,0,0,.54);
  background-color: #1f2326;
  position: fixed;
  top: 0;
  width: 328px;
  height: 100vh;
  z-index: 1
}

И html код header и сайдбара:

<header class="header" id="header">
  <div class="container">
    <div href="#0" id="logo" class="logo">
      <div>
        <a href="#0">SNAKESOFT</a>
      </div>
    </div>
    <nav href="#0" class="top-items">
      <ul>
        <li>
          <a href="#0">TOP-100</a>
        </li>
      </ul>
    </nav>
    <div class="search-form" id="search-form">
      <form action="" method="GET">
        <input type="text" placeholder="Enter something..." autocomplete="off" name='search' maxlength="30">
        <button type="submit" class="fas fa-search fa-lg"></button>
        <small>ENTER</small>
      </form>
    </div>
    <button class="fas fa-search fa-lg" id="mobile-search" style="display: none"></button>
  </div>
</header>

<aside id="sidebar" class="col-r">
  <div class="inner">
    <section class="side-menu" id="side-menu">
      <header>
        <h1>CATEGORIES</h1>
      </header>

      <div class='swanky'>
        <div class='swanky_wrapper'>

          <input id='cybersecurity' name='radio' type='radio'>
          <label for='cybersecurity'>
            <span class="icon-fg" style="background-image: url(img/fire.svg)">
              <span class="icon-bg" style="background-image: url(img/fire.svg)"></span>
            </span>
            <span class="swanky-header">CYBERSECURITY</span>
            <div class='lil_arrow'></div>
            <div class='bar'></div>
            <div class='swanky_wrapper__content'>
              <ul>
                <li>SOFTWARES</li>
                <li>DATABASES</li>
              </ul>
            </div>
          </label>

          <input id='winsoft' name='radio' type='radio'>
          <label for='winsoft'>
            <span class="icon-fg" style="background-image: url(img/windows-colored.svg)">
              <span class="icon-bg" style="background-image: url(img/windows-colored.svg)"></span>
            </span>
            <span class="swanky-header">WINDOWS SOFTWARES</span>
            <div class='lil_arrow'></div>
            <div class='bar'></div>
            <div class='swanky_wrapper__content'>
              <ul>
                <li>APPEARANCE</li>
                <li>MEDIA</li>
                <li>SYSTEM</li>
                <li>SECURITY</li>
                <li>DIFFERENT</li>
              </ul>
            </div>
          </label>

          <input id='forprogers' name='radio' type='radio'>
          <label for='forprogers'>
            <span class="icon-fg" style="background-image: url(img/programming.svg)">
              <span class="icon-bg" style="background-image: url(img/programming.svg)"></span>
            </span>
            <span class="swanky-header">FOR PROGRAMMERS</span>
            <div class='lil_arrow'></div>
            <div class='bar'></div>
            <div class='swanky_wrapper__content'>
              <ul>
                <li>PYTHON</li>
                <li>C++</li>
                <li>JAVASCRIPT</li>
                <li>HTML/CSS</li>
                <li>DIFFERENT</li>
              </ul>
            </div>
          </label>

          <input id='design' name='radio' type='radio'>
          <label for='design'>
            <span class="icon-fg" style="background-image: url(img/design.svg)">
              <span class="icon-bg" style="background-image: url(img/design.svg)"></span>
            </span>
            <span class="swanky-header">DESIGN</span>
            <div class='lil_arrow'></div>
            <div class='bar'></div>
            <div class='swanky_wrapper__content'>
              <ul>
                <li>PICTURES</li>
                <li>ICONS</li>
                <li>FONTS</li>
                <li>DIFFERENT</li>
              </ul>
            </div>
          </label>

          <label for='other'>
            <span class="icon-fg" style="background-image: url(img/package.svg)">
              <span class="icon-bg" style="background-image: url(img/package.svg)"></span>
            </span>
            <span class="swanky-header">OTHER</span>
          </label>

        </div>
      </div>

    </section>
  </div>
</aside>

И вот фотки до и после перекрытия:

Вот еще прошлый код залил в облако https://cloud.mail.ru/public/hukM/PPmCxewU3. Проблема осталась.

И видео до и после перекрытия: https://cloud.mail.ru/public/r8Ag/JiLybQPWd, https://cloud.mail.ru/public/5jmM/PWzhZyoJk

Если маловато данных, напишите и скину все что нужно

Заранее спасибо.