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

我有一个使用固定菜单图标的单页网站。网站的一些部分是黑暗的，有些是光明的。因此，我想将我的菜单图标更改为黑色或白色版本，这取决于用户滚动到网站的哪个部分。
例如，我的登录页有白色背景，使用的菜单图标是黑色版本。在登录页下面是我的“关于”部分，它有一个黑色的背景。当用户滚动到此区域时，菜单图标应改为白色。
不确定我是否在正确的轨道上，但我已经为我的网站的每个部分放置了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);
}

最佳答案

更新：（根据评论部分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');
    }
});

关于jquery - 滚动到网站的特定部分时如何更改菜单图标？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25967196/