当<div>到达屏幕顶部时，如何更改NavBar的颜色？

Question

当div.textbox到达屏幕顶部时，如何更改 NavBar 背景颜色和文本颜色。

我可以自己更改颜色，所以不用担心它们是什么颜色。

HTML：

<ul id="navbar">
    <b>
        <li><a href="#home">Home</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#about">About</a></li>
    </b>
</ul>
<h1> What is Artificial Intelligence? </h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed</p>
<div class="bgimg-1"></div>
<div class="text-box" id="textbox"></div>

NavBar CSS：

ul {
    list-style-type: none;
    padding: 0;
    overflow: inherit;
    background-color: rgba(0,0,0,0);
    position: fixed;
    top: 0;
    width: 100%;
    margin-top: 0;
    min-height: 15px;
    min-width: 200px;
}

li {
    float:right;
}

li a {
    display: block;
    background-color: rgba(0,0,0,0);
    color: white;
    text-align: left;
    padding: 15px 15px;
    text-decoration: none;
    float: right;
    transition: 0.3s all ease-in;
    border-radius: 3px;
}

li a:hover:not(.active) {
    background-color: rgba(0,0,0,0.3);
    transition: 0.3s all ease-in;
}

非常感谢您的帮助