滚动到顶部时如何将导航背景颜色更改为透明？

Question

我很挣扎，真的很困惑......当我向下滚动导航栏时，这很棒。 当我向上滚动时，我希望它是那种绿色，但是一旦我在页面顶部，我希望它变得透明。 有人可以帮我解决这个问题吗？

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>

Answer 1

你只需要在onscroll事件中再添加一个条件：

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

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

代码笔链接

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

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>