Why my transition doesn't work on bootstrap nav?

user_14107391 0
Viewed 50

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;

}
bootstrap-4 css html javascript
1 Answers

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.

user_95474230
Related