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

【问题标题】：How to change menu icon when scrolling to specific sections of the website?滚动到网站的特定部分时如何更改菜单图标？
【发布时间】：2014-11-16 00:18:27
【问题描述】：

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

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

不确定我是否走在正确的轨道上，但我已经为我网站的每个部分放置了 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);
}

【问题讨论】：

标签： jquery html css menu scroll

【解决方案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');
    }
});

【讨论】：

谢谢，这似乎很好用！我正在尝试向它添加其他实例。例如，如果我希望它在下一部分再次更改为黑色版本，则在 about 部分更改为白色版本，请说“工作”部分，我将如何去做？

【解决方案2】：

另一种解决方案：

$(document).scroll( function() {
    var scrollTop = $(this).scrollTop() + 40; // 40px - Fixed nav height
    var closestElement = $(this).find('.section').filter( function() {
        return $(this).offset().top > scrollTop;      
    }).first();

    if( closestElement.hasClass('white'))
        $('#fixed').removeClass('black').addClass('white');
    else
        $('#fixed').removeClass('white').addClass('black');
});

fiddle

【讨论】：