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函数值nbar.scrollTop始终为0.

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

我将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"; } }

＆＃13;

＆＃13;

<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>

＆＃13;

change

＆＃13;

＆＃13;

＆＃13;