-1

I have a class called nav-up which I apply with javascript to my navbar when I scroll to make it disappear. I also have a class called nav-dark to make it have a background color.

I want there to be a smooth transition on both these changes however it seems I can only do one at a time as if I do both it cancels the other out.

.navbar {
  transition: top 0.2s ease-in-out;
  transition: background-color 0.2s ease-in-out;
}

.nav-up {
  top: -80px;
}

.nav-dark {
  background-color: rgba(43, 43, 43, 1);
  -webkit-box-shadow: 0 5px 14px rgba(0, 0, 0, 0.7);
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.7);
}

.nav-transparent {
  opacity: 0;
}

Here's the javascript. It works for applying classes but I intended for it to be transparent again if I scroll back up.

window.onscroll = function() {scrollFunction()};

document.querySelector(".navbar").classList.add('navbar-transparent')
document.querySelector(".navbar").classList.remove('navbar-dark');

function scrollFunction() {
  if (document.body.scrollTop < 330 || document.documentElement.scrollTop < 330) {
    document.querySelector(".navbar").classList.add('nav-dark');
  } else if (document.body.scrollTop > 330 || document.documentElement.scrollTop > 330){
    document.querySelector(".navbar").classList.add('navbar-transparent')
    document.querySelector(".navbar").classList.remove('navbar-dark');
  }
}
GTA.sprx
  • 817
  • 1
  • 8
  • 24

1 Answers1

3

You have correctly added a transition to the html element that is going to be "transitioned" from state x to state y. To engage multiple css properties, use commas, like this example:

transition: width 2s, height 2s, background-color 2s, transform 2s;

anatolhiman
  • 1,762
  • 2
  • 14
  • 23