Footer hidden at start then visible after scroll

Question

Let's be blunt: I already have this script for my header that is working just fine :

var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
  var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos && currentScrollPos > 125) {
    document.getElementById("mobbar").style.top = "0";
  } else {
    document.getElementById("mobbar").style.top = "-10vh";
  }
  prevScrollpos = currentScrollPos;
}

The CSS that comes with it:

#mobbar {
    height: 10vh;
    position: fixed;
    top: 0px;
    background-color: #1f1f1f;
    transition: all 0.5s;
}

Everything works as intented. Now, and this will look very noobish so be prepared, I want the same thing happening for my footer element. I made it work somehow with style.bottom and scrollpos but I can't for the life of me come with a version that hides at first the fixed footer when you arrive on the page then shows it once you scroll down until a certain amount (or a "near the end value" which would be better).

Since I failed I tried something else. I went ahead and looked into adding a class on scroll to an element so I could try and slide it in and out among other things but let's be honest with each other I failed miserably.

Now I don't even know if I can re-use the same kind of script that I am using for my mobile header (#mobheader in the script for my header) and include a hidden property until starting to scroll down.

I am now lost as to what I should look deeper into. Being rather new at this (what a surprise!) and trying to read what I manage to find about similar topics, I feel like I'm going further and further from what should be a simple solution to someone who can read this properly. Therefore here I am, in the need of being saved!

Many thanks in advance to anyone that could point me in the right direction.

Just in case: Here is what I came up with to have the same effect but from the bottom (the CSS is the same but with bottom: 0;):

var nextScrollpos = window.pageYOffset;
window.onscroll = function() {
  var currentScrollPos = window.pageYOffset;
  if (nextScrollpos < currentScrollPos) {
    document.getElementById("footbar").style.bottom = "0";
  } else {
    document.getElementById("footbar").style.bottom = "-10vh";
  }
  nextScrollpos = currentScrollPos;
}