Window.pageYOffset before and after onscroll event javascript

I have a very simple script for a "disappearing" navbar that's supposed to disappear on scroll down and appear again on scroll up.

The script is not mine, but I don't understand how this works if I'm comparing two variables that apparently have the exact same value since the window.pageYOffset returns the number of pixels of the document that has been scrolled from the top. The only difference is that one variable is in the global scope and the second one isn't.

The variable currentScrollPos is inside the function for the 'onscroll' event, so I'm guessing the previousScrollPos stores the number of pixels on the Y position first, then the other variable because it's in the global scope and that's why inside the function I can check if previous is greater than currentScrollPos...? Is this correct?

And if I end the function saying that previousScrollPos = currentScrollPos (which makes the nav bar appear again at scroll up), how does it still make the condition be possible in the scroll down?

This is probably a dumb question but I'm just not getting it.. Help please

JS

const header = document.querySelector("header");let previousScrollPos = window.pageYOffset; //console.log({previousScrollPos})window.onscroll = function(){let currentScrollPos = window.pageYOffset;//console.log({previousScrollPos})//console.log({currentScrollPos})previousScrollPos > currentScrollPos ?header.classList.remove("scroll") : header.classList.add("scroll") previousScrollPos = currentScrollPos;}

CSS

header{position:fixed;top:0;left:0;width:100%;height:7rem;background-color:var(--main-color);z-index:1;transition:.5s;}header.scroll{position:fixed;top:-7rem;left:0;width:100%;height:7rem;background-color:var(--main-color);z-index:1;transition:.5s;}