Добавление классов jQuery не работает с Bootstrap

Question

Я пытаюсь добавлять и удалять классы в зависимости от положения заголовка pageYOffset, и я совершенно не знаю, почему мой код не работает

<nav class="navbar navbar-expand-md transparent py-1 fixed-top" id="header">
  <div class="container">
    <a class="navbar-brand">Brand</a>
    <button
      type="button"
      class="navbar-toggler"
      data-toggle="collapse"
      data-target="#navbarCollapse"
    >
      <span class="navbar-toggler-icon"></span>
    </button>
    <div
      class="collapse navbar-collapse"
      id="navbarCollapse"
      aria-controls="navbarNav"
      aria-expanded="false"
      aria-label="Toggle navigation"
    >
      <ul class="navbar-nav ml-auto text-white">
        <li class="nav-item">
          <a class="nav-link">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link">Home</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

CSS:

 .navbar.transparent.navbar-inverse .navbar-inner {background: transparent !important; }

jQuery:

let pagetop = $('#header');
 let yPos = window.pageYOffset;

  if(yPos > 200) {
    pagetop.removeClass('transparent').addClass('navbar-light bg-light');
  } else {
    pagetop.removeClass('navbar-light bg-light').addClass('transparent');

  }
});

Моя цель - изменить цвет заголовка на белый при прокрутке вниз и быть прозрачным, если значение переменной yPos меньше 200.

Answer 1

let pagetop = $('#header');
let yPos = window.pageYOffset;

$(window).scroll(function() {
  let yPos = window.pageYOffset;
  console.log(yPos);
  if(yPos > 200) {
      pagetop.removeClass('transparent').addClass('navbar-light bg-light');
  } else {
      pagetop.removeClass('navbar-light bg-light').addClass('transparent');
  }
});

Вы написали свой код, чтобы он выполнялся только при загрузке страницы, а не при прокрутке.