Have a fixed nav with JS

HTML-CSS
1

https://jsfiddle.net/rxz9pLvs/

So when scroll down and sticky that black nav there can add on .fixed

 @keyframes test
 {
 from{opacity: 0;}
 to {opacity 1;}
 }
 .fixed{
 animation: test 5s;
 }

But how can do that the animation works not only towards but backwards also? The animation apply from javascript scrolled to that nav so cant apply before? or somehow?

Any idea?

2

If all you’re doing is animating the opacity, there’s an easier way:

.fixed {
    opacity: 0;
    transition: opacity 5s;
}

.fixed.active {
    opacity: 1;
}

Now in JS, just add or remove the class active depending on your conditions.