通过 jQuery 添加类不适用于 Bootstrap

Question

I'm trying to add and remove classes depending on pageYOffset position of the header, and I completely don't know why my code is not working

<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');

  }
});

My point is to change header color to white when scrolling down, and to be transparent when value of the variable yPos is less than 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');
  }
});

You wrote your code so it only execute when the page is loaded not when you scrolled.