Reset transition back to original position

JavaScript
1

I’m trying to find a way to reset navigation bar back to its original position before the transition. Any ideas on how to do it? I tried adding and removing classes but it doesn’t really work accept for the first if statement.

link:codepen.io/anon/pen/yEENgp

window.onload = function (){
var nav = document.getElementById(‘nav’)

window.addEventListener(‘scroll’, function () {
if (window.pageYOffset >= 100) {
//nav.style.display = ‘block’;

     nav.classList.add("transition");
     nav.classList.toggle("transition");
}

  if (window.pageYOffset <= 100)  {
  nav.classList.remove("transition");
//add another class?
  nav.classList.add("back");
    

}
})


}
2

Well… if you add transition, and then toggle transition… transition gets shut off.

1 Like
3

Looks like it fixed the issue, when would the toggle method be ideal for classes?

4

Toggle is for when you’re working with state-indeterminate systems.

IE:
You have a button for an accordion DIV. Said button needs to both open and close the accordion.
You COULD code the function as state-determinate, with an if (open) { close} else {open}.
Or you could code it state indeterminate toggle. Toggle just says… “whatever state it was in, make it the other one.”

5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.