javascript - 在滚动更改菜单 HTML 的颜色

Question

首先，我是这个领域的新手。我试图对此进行搜索，但没有任何内容符合我的要求。

所以我有这个 html:

<aside>
  <div align="center">
    <img src="images/teste.jpg" style="width:200px;height:200px;">
  </div>
  ...
  <div id="disciplinas">
     <h3>Disciplinas:</h3>
    <li><a href="#x">x</span></a></li>
    <li><a href="#y">y</span></a></li>
    <li><a href="#z">z</span></a></li>
    <li><a href="#w">w</span></a></li>
    <br/>
  </div>
</aside>

<div id="main">
<section id="x">
<div>
<img src="images/teste.jpg">
</div>
</section>

<section id="y">
<div>
<img src="images/teste.jpg">
</div>
</section>
...

我试过这段代码但没有成功:

        <script type="text/javascript">
$(document).ready(function(){       
            var scroll_pos = 0;
            $(document).scroll(function() { 
                scroll_pos = $(this).scrollTop();
                if(scroll_pos > 210) {
                    $("li").css('background-color', 'blue');
                } else {
                    $("li").css('background-color', 'red');
                }
            });
        });
        </script>

我想知道如何更改 <li> 的颜色在滚动时，当他们到达正确的部分时(或者我可能需要改用 div)。 谢谢

如果有帮助，div disciplinas 和 li 的 css:

#disciplinas {
    border: 1px solid;
    margin-top: 5%;
    margin-bottom: 5%;
    text-align: center;
    box-shadow: 10px 10px 5px #DCDCDC;
    background-color: white;
}

li {
    text-align: center;
  list-style-type: none;
}

Answer 1

尝试使用此代码，

$(window).scroll(function () {
    var scroll_pos= $(window).scrollTop();

  if(scroll_pos > 210) {
                    $("li").css('background-color', 'blue');
                } else {
                    $("li").css('background-color', 'red');
                }
});

希望对您有所帮助。