How to add a class when best personal Finance?

Hello!
There is an example:
https://codepen.io/slavka_piyavka/pen/xxbdxGO

Tell me how when you scroll up ask the class list fixed, but when scrolling down to remove it via js?
It is very often the case, but the second day of searching on forums and Google gave nothing, is used throughout jquery, but it is strictly forbidden in my case. Again, you need a solution without jquery, only vanilla js, this is important.
p.s. if at all possible.
https://codyhouse.co/demo/auto-hiding-navigation/i...
that's how it should ideally look like.

I think you need to use event listener, but where to go next - I don't know.

window.addEventListener('scroll', function() {

});
April 3rd 20 at 18:56
1 answer
April 3rd 20 at 18:58
You need to listen to event scroll , and relative to the previous position to determine the direction:
window.addEventListener('scroll', function(e) {
 if (this.oldScroll > this.scrollY) {
console.log('up');
 } else {
console.log('down');
}
 this.oldScroll = this.scrollY;
}, false);
thank you for the tip! - Lionel commented on April 3rd 20 at 19:01
and what about mobile devices? because there wheel not work - Lionel commented on April 3rd 20 at 19:04
@elvera_Dietrich45, fair point. Then still need to listen to event scroll instead of the wheel and relative to the previous position to determine the direction:
window.addEventListener('scroll', function(e) {
 if (this.oldScroll > this.scrollY) {
console.log('up');
 } else {
console.log('down');
}
 this.oldScroll = this.scrollY;
}, false);
- Garry.Buckrid commented on April 3rd 20 at 19:07

Find more questions by tags JavaScript