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>