You just need to add one more condition in the onscroll event:

if(currentScrollPos === 0) {
   document.getElementById("navbar").style.backgroundColor = 'transparent';
} else {
   document.getElementById("navbar").style.backgroundColor = 'rgb(27,53,52)';
}

================================================

Codepen Link

================================================

window.onscroll = function() {
  var currentScrollPos = window.pageYOffset;

  if(currentScrollPos === 0) {
    document.getElementById("navbar").style.backgroundColor = 'transparent';
  } else {
    document.getElementById("navbar").style.backgroundColor = 'rgb(27,53,52)';
  }

  if (prevScrollpos > currentScrollPos) {
    document.getElementById("navbar").style.top = "0";

  } else {
    document.getElementById("navbar").style.top = "-150px";
  }


  prevScrollpos = currentScrollPos;
}


 <div class="container-fluid nav-padding" id="navbar">
            <div class="row">
                <div class="col-12">
                    <nav>
                        <div class="d-flex">
                            <div class="col">
                                <span class="nav-left-text">west end</span>
                            </div>
                            <div class="col text-right">
                                <button onClick="document.getElementById('rego').scrollIntoView();" class="register-btn-top">register <span class="d-none d-sm-inline  d-lg-inline">now</span></button>
                            </div>
                        </div>
                    </nav>
                </div>
            </div>
        </div>

I’m struggling and really confused… when I scroll down my navbar hides which is great. When I scroll up I want it to be that green color, but once I’m at the top of the page I want it to go transparent. Could someone please help me with this?

https://codepen.io/mattmcgilton/pen/rNarKgR

window.onscroll = function() {
  var currentScrollPos = window.pageYOffset;

  if (prevScrollpos > currentScrollPos) {
    document.getElementById("navbar").style.top = "0";

  } else {
    document.getElementById("navbar").style.top = "-150px";
  }


  prevScrollpos = currentScrollPos;
}


 <div class="container-fluid nav-padding" id="navbar">
            <div class="row">
                <div class="col-12">
                    <nav>
                        <div class="d-flex">
                            <div class="col">
                                <span class="nav-left-text">west end</span>
                            </div>
                            <div class="col text-right">
                                <button onClick="document.getElementById('rego').scrollIntoView();" class="register-btn-top">register <span class="d-none d-sm-inline  d-lg-inline">now</span></button>
                            </div>
                        </div>
                    </nav>
                </div>
            </div>
        </div>