Bootstrap Navbar меняет стиль на не свернутый

Question

Я работаю над страницей с пользовательским меню навигации с начальной загрузкой 4. У меня есть и navbar, и более простой nav, оба обернутые внутри .header div.

Позиция навигацииposition:fixed сверху, таким образом, герой, показанный ниже, виден (навигация bg прозрачна на аффикс-топе).

Когда я прокручиваю страницу, я удаляю класс .affix-top, меняя цвета назаднавигация непрозрачная.(через старый Affix.js из Bootstrap 3)

Это работает в основном нормально, одна из основных проблем, с которой я сталкиваюсь, заключается в том, что, когда я в мобильном представлении, я делаю навигацию непрозрачной, когда я открываючертежник.Прямо сейчас это единственный способ управления применяемым стилем с помощью классов .affix и .affix-top.

Единственное решение, которое я нашел до сих пор, - это дублирование большей части написанного мной CSS с помощью пользовательскогоrule.

Не имея большого опыта, я пытаюсь найти лучший подход.

Это частичный рабочий пример, показывающий, чего я достиг на данный момент: https://jsfiddle.net/9xd5u6pw/3/

Код HTML для навигации:

<header class="header header-left header-transparent sticky-top">
  <!-- Begin Top-Bar  -->
  <div class="topbar">
    <!-- Begin top bar -->
    <div class="topbar-content topbar-border container">
      <div class="topbar-menu d-none d-lg-inline-flex">
        <ul class="nav">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
          </li>
        </ul>
      </div>
      <div class="topbar-right">
        <div class="topbar-social">
          <ul class="social-icons shortcode nav">
            <li class="pp_facebook_url nav-item">
              <a target="_blank" title="Facebook" href="http://facebook.com" class="nav-link">
                            <i class="fab fa-facebook"></i>
                            </a>
            </li>
            <li class="pp_twitter_username nav-item">
              <a target="_blank" title="Twitter" href="//twitter.com/example" class="nav-link">
                            <i class="fab fa-twitter"></i>
                            </a>
            </li>
          </ul>
        </div>
        <div class="topbar-info">
          <span class="info-link" id="topbar-info-phone">
                    <a href="mailto:gagga@gagga.it">
                    <i class="fas fa-envelope"></i> mail@example.it
                    </a>
                    </span>
        </div>
      </div>
    </div>
    <!-- End top bar -->
  </div>
  <!-- End Top-Bar  -->
  <!-- Begin Main Menu -->
  <nav class="navbar navbar-expand-md">
    <div class="container">
      <!-- Begin logo -->
      <a class="navbar-brand" href="{{ site.home_url }}">
            <img class="navbar-brand-img-dark align-middle img-retina"
                src="https://via.placeholder.com/220x240/fff/000/?text=dark" alt="{{ site.name }}"
                width="110" height="120"/>
            <img class="navbar-brand-img-light align-middle img-retina"
                src="https://via.placeholder.com/220x240/000/fff/?text=light" alt="{{ site.name }}"
                width="110" height="120"/>
            </a>
      <!-- End logo -->
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main-nav-menu" aria-controls="main-nav-menu" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
            </button>
      <div class="collapse navbar-collapse" id="main-nav-menu">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Blog</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Info</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Contact</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Shop</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Dropdown
                        </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  <!-- End Main Menu -->
</header>

Мой пользовательский стиль (SASS)

.header {
  background-color: #fff;
  font-size: 0.875rem;
  letter-spacing: 2px;
  border-bottom: 1px solid #fff;
  &.header-transparent {
    &.sticky-top {
      position: fixed !important;
      top: 0px;
      width: 100vw;
    }
    &:not(.affix) {
      background-color: transparent;
      color: #fff;
      border-color: transparent;
      a {
        color: #fff;
      }
      .topbar {
        background-color: transparent;
        .topbar-content {
          color: #fff;
          a {
            color: #fff;
          }
          &.topbar-border {
            border-color: #fff;
          }
        }
      }
      .navbar {
        .navbar-brand {
          color: #fff;
          &:hover, &:focus {
            color: #fff;
          }
        }
        .navbar-nav {
          .nav-link {
            color: #fff;
            &:hover, &:focus {
              color: #fff;
            }
            &.disabled {
              color: #ddd;
            }
          }
          .show > .nav-link, .active > .nav-link {
            color: #fff;
          }
          .nav-link {
            &.show, &.active {
              color: #fff;
            }
          }
        }
        .navbar-toggler {
          color: #fff;
        }
        .navbar-text {
          color: #fff;
          a {
            color: #fff;
            &:hover, &:focus {
              color: #fff;
            }
          }
        }
      }
      .navbar-brand-img-light {
        display: inline-block !important;
      }
      .navbar-brand-img-dark {
        display: none;
      }
    }
  }
  .topbar {
    font-size: 0.875rem;
    .topbar-content {
      display: flex;
      flex-wrap: nowrap;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      &.topbar-border {
        border-bottom: 1px solid;
        border-color: #212529;
      }
      .nav .nav-link {
        padding: 0.25rem 0.5rem;
      }
      .topbar-right {
        display: flex;
        flex-wrap: nowrap;
        flex-direction: row;
        justify-content: end;
        align-items: center;
        margin-left: auto;
        .topbar-info .info-link {
          padding: 0.25rem 0.5rem;
        }
      }
    }
  }
  .navbar {
    font-weight: 600;
    text-transform: uppercase;
    .navbar-toggler {
      padding: 0;
      border: none;
      line-height: inherit;
    }
    .navbar-nav {
      .nav-link {
        color: #212529;
        &:hover, &:focus {
          color: #212529;
          text-decoration: underline;
        }
        &.disabled {
          color: #555;
        }
      }
      .show > .nav-link, .active > .nav-link {
        color: #212529;
        text-decoration: underline;
      }
      .nav-link {
        &.show, &.active {
          color: #212529;
          text-decoration: underline;
        }
      }
    }
    .navbar-extra .cart-count {
      color: #fff;
      background-color: #007bff;
    }
  }
  .navbar-brand-img-light {
    display: none !important;
  }
  .navbar-brand-img-dark {
    display: inline-block;
  }
  .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  }
}

Мой JS:

jQuery(".header.sticky-top").affix();

  jQuery('.header').each(function() {
    jQuery('.header .navbar-collapse').on('hide.bs.collapse', function() {
      console.log('hide');
      jQuery('.header').removeClass('header-light');
    });

    jQuery('.header .navbar-collapse').on('show.bs.collapse', function() {
      console.log('show');
      jQuery('.header').addClass('header-light');
    });
  });