jquery - 滚动到网站特定部分时如何更改菜单图标？

Question

我有一个使用固定菜单图标的单页网站。网站的有些部分是深色的，有些是浅色的。因此，我想根据用户滚动到网站的哪个部分将菜单图标更改为黑色或白色版本。

例如，我的目标网页有白色背景，所使用的菜单图标是黑色版本。登陆页面下方是我的“关于”部分，其背景为黑色。当用户滚动到此部分时，菜单图标应更改为白色版本。

不确定我是否走在正确的轨道上，但我已经为网站的每个部分放置了 id 标签，并且菜单图标引用了实际菜单图标图像所在的 css。我相信 jquery 是让它真正改变图像的答案，但我不知道如何编码。

谢谢。

HTML

<!-- NAVIGATION MENU ICON -->
		
<div class="sb-navbar sb-slide">
    <!-- Right Slidebar control -->
    <div class="sb-toggle-right">
        <div class="icon_black"></div>
    </div>
</div>

CSS

  

.icon_black {
		width:72px;
		height:72px;
		background-image: url(../img/icon_black.png);
}
.icon_white {
		background-image: url(../img/icon_white.png);
}

Answer 1

更新:(基于评论部分中OP的进一步要求)

试试这个:

$(document).on('scroll',function(){
    if($(document).scrollTop()>=$('#about').offset().top && $(document).scrollTop()<$('#work').offset().top){ //assuming the about section has an id called about (#about)
        $('.icon_black').removeClass('icon_black').addClass('icon_white');
    }
    else{
        $('.icon_white').removeClass('icon_white').addClass('icon_black');
    }
});