Why my transition doesn't work on bootstrap nav?

Question

Why my class toggle is strict without any transition effect even though I added transition: 0.5s? It doesn't work on my bootstrap website. Whenever I try to test it on custom div on jsfiddle site then it works fine. https://jsfiddle.net/dawid1798/5goyjwx0/3/

window.addEventListener('scroll', function() {
    var header = document.getElementById("navbar");
    header.classList.toggle("fixednav", window.scrollY > 100);
});

.fixednav {
    transition: 0.5s;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 9999;

}

Answer 1

When nav loses class.fixednav it also loses the transition property.

Put it on.nav:

.nav {
  width: 100%;
  height: 250px;
  background: red;
  transition: 0.5s;
}

Also check if bootstrap is loaded into the project and that you aren't disabling the transition with your css.