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');
                }
});

希望它有所帮助。

Answer 2

添加jquery库js文件

删除不必要的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</a></li>
    <li><a href="#y">y</a></li>
    <li><a href="#z">z</a></li>
    <li><a href="#w">w</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>

https://jsfiddle.net/rq6rgrcj/

Answer 3

检查此codepen： http://codepen.io/yuki-san/pen/eJqLNO

您可以看到这个想法以及这些部分如何与滚动事件相关联。现在使用它，只需更改li背景颜色而不是下划线

创建一个css类，让我们说 - scrollColor并使用jQuery添加它

.addClass(".scrollColor")

当窗口滚动到正确的位置并在滚动时将其删除

在滚动更改菜单HTML的颜色

3 个答案: