JavaScript-CSS：无法让导航菜单在滚动时从透明变为不透明

Question

好的，所以我在玩一些设计理念，似乎无法让 JavaScript 做我想做的事。 我想要一个透明的 TopNav，当用户滚动到 48px 或我认为 TopNav 背景变黑的任何地方时。 下面是我想要发生的粗略示例，但是当我滚动 TopNav 时，它只是保持透明。 我已经尝试了从其他答案到复制/粘贴点的几个解决方案，只需编辑元素名称以匹配我的 html。 我只是不确定我做错了什么：

CSS

body {
    font-family: Futura, Arial, Trebuchet MS, sans-serif;
}

header {
    margin: 0;
}
.stickyNav {
    position:fixed;
    top:0;
    left: 0;
    width: 100%;
    height: 48px;
}
.topNav {
    max-width: 1366px;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    background-color: black;
    color: #D4D4D4;
    height: 48px;
}
.scroll {
    background-color:#000000;
}
.navigationMenu{
    display: inline-flex;
    list-style: none;
}

JS

 var myNav = document.getElementById("TopNav"); window.onscroll = function() { "use strict"; if (document.body.scrollTop >= 1 || document.documentElement.scrollTop >= 1) { myNav.classList.add("scroll"); } else { myNav.classList.remove("scroll"); } };

HTML

 <header > <div class="stickyNav" > <nav class="topNav" id="TopNav"> <h3>LOGO HERE</h3> <ul class="navigationMenu"> <li class="navigationItem">Home</li> <li class="navigationItem">Services</li> <li class="navigationItem">About</li> <li class="navigationItem">Contact</li> </ul> </nav> </div> </header>

Answer 1

似乎无法让 JavaScript 做我想做的事

这是 CSS 样式的问题 - 而不是 Javascript。 这段代码中的 Javascript 工作只是检测滚动并添加或删除类。

因此，如果您希望默认背景透明，请执行以下操作之一：

.topNav { background-color: transparent; } // transparent
.topNav { background-color: rgba(0,0,0,0); } // transparent

并在添加一个具有背景的类之后，执行以下操作：

.topNav.scroll { background-color: rgba(0,0,0,.5); }} // 50% black, "semi-transparent"