菜单文本在滚动时更改颜色

Question

当有人向下滚动时，我试图让我的菜单文本改变颜色。 这是网站https://patrolpoints.com 。 例如，当您在我们的其他网站https://www.condocontrolcentral.com上向下滚动时，菜单颜色会从白色变为黑色。 我想做同样的事情

我尝试添加此代码，使标题包装从透明变为白色。 添加了站点标题类，但它只更改了背景

<script type="text/javascript">
jQuery(window).scroll(function() {    
    var scroll = jQuery(window).scrollTop();
    if (scroll >= 500) {       
        jQuery(".site-title").addClass("fixedtxt");
    } else

    {
        jQuery(".site-title").removeClass("fixedtxt");
    }
}); 
</script> 

<style>
.site-title.fixedtxt{
background-color:#000000;
}
</style>

Answer 1

 (function() { var setPoint = 50; var headerElement = document.getElementById("header"); var ReferenceElement = document.getElementById("page"); function ToggleHeader(setValue, currentPosValue) { if(currentPosValue > setValue) { headerElement.style.color = "black"; headerElement.style.backgroundColor = "white"; }else{ headerElement.style.color = "white"; headerElement.style.backgroundColor = "transparent"; } } ReferenceElement.onscroll = function() { ToggleHeader(setPoint, ReferenceElement.scrollTop); document.getElementById("text").innerHTML = "Scroll pos is: " + ReferenceElement.scrollTop; } }());

 body, html{ margin: 0; padding: 0; width: 100%; height: 100%; position: relative; }

 <div id="page" style="height: 100%; width: 100%; overflow: scroll;"> <header id="header" style=" color: white; height: 72px; width: 100%; background-color: transparent; position: fixed; top: 0; line-height: 72px; "> <a>Company Logo</a> <a>Some Link 1</a> <a>Some Link 2</a> <a>Some Link 3</a> <a>Some Link 4</a> <a id="text"></a> </header> <Section role="main" id="section" style=" height: 1800px; padding: 72px; width: 100%; background-color: #d1d1d1;"> <h1> Change Header Colors when this passes the header </h1> <p>Some Text</p></br /> <p>Some Text</p></br /> <p>Some Text</p></br /> <p>Some Text</p></br /> <p>Some Text</p></br /> </section> </div>