Bottom Navigation disappears when scrolling down, reappears when scrolling up?

Like the title says, I am trying to make my bottom navigation disappear when scrolling down, and reappear when scrolling up.

I tried following a tutorial about a top navigation, and thought I could mimic the results, and I tried to mimic an answer on here. Neither worked, it is not moving at all. Any help with this would be greatly appreciated, but I am VERY new to this, so feel free to explain it like I’m 5.

This was the code I tried:

html

<footer id="footer"><h1>Bottom of page<h1></footer>

css

footer {
     position: fixed;
     bottom: 0;
     width: 100%;
     height: 55px;
     margin: auto;
     align-items: center;
}

script

{
            var(prevScrollpos) = window.pageYOffset; 
            window.onscroll = function() {
                var currentScrollPos = window.pageYOffset;
                if (prevScrollpos > currentScrollPos) {
                    document.getElementById("footer").style.bottom = "-55px";
                } else {
                    document.getElementById("footer").style.bottom = "0";
                }
                prevScrollpos = currentScrollPos;
            }
        }