javascript - Ho 制作一个在页面滚动时淡入的导航栏

Question

我制作了一个导航栏，其背景颜色在用户向下滚动时从透明变为半透明黑色。我的问题是当用户滚动到页面顶部时我无法让它变回透明这是我目前所拥有的

HTML:

<nav id="mynav" style="transition: 1.4s ease-in" position:fixed;> <div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
  <li class="nav-item">
    <a class="nav-link" href="Courses.html">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="Log In">Videos</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Images</a>
  </li>    
</ul></nav>

JS:

    window.onscroll = navfade;
function navfade(){
    var nbar = document.getElementById("mynav");
    if(nbar.scrollTop < 5){
        nbar.style.background = "rgba(10,10,20,0.45)";
    }else {
        nbar.style.background = "transparent";
    }
}

Answer 1

在您的 navFade 函数中，nbar.scrollTop 的值始终为 0。

检查 How to get and set the current web page scroll position?

我将 nbar.scrollTop 替换为 document.documentElement.scrollTop

window.onscroll = navfade;
function navfade(){
    var nbar = document.getElementById("mynav");
   
    if(document.documentElement.scrollTop < 5){
        nbar.style.background = "rgba(10,10,20,0.45)";
    }else {
        nbar.style.background = "transparent";
    }
}

<nav id="mynav" style="transition: 1.4s ease-in" position:fixed;> <div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
  <li class="nav-item">
    <a class="nav-link" href="Courses.html">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="Log In">Videos</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Images</a>
  </li>    
</ul></nav>

<div>Fake Content</div>
<div>Fake Content</div>
<div>Fake Content</div>
<div>Fake Content</div>
<div>Fake Content</div>
<div>Fake Content</div>
<div>Fake Content</div>