动态切换菜单颜色

Question

我的网站的顶部菜单固定在左上角，此菜单为白色且背景透明。我的页面被分为页面宽度为100％的图像，并且图像下方的白色背景上有文字。滚动页面的白色部分时，我想将菜单的颜色切换为黑色。在图像上方切换回白色。我认为切换的最佳方法是为图像提供断点，因此，当菜单的滚动高度低于顶部图像页面的滚动顶部时，菜单为黑色，而菜单位于顶部图像页面的滚动顶部之上和下方时，则为黑色底部图像页面的滚动顶部为白色。

第一个示例，白色菜单

第二个示例，黑色菜单

不同的页面

P.s。我没有固定的图像/文本位置，因为站点的页面在上下文基础上是不同的，因此我需要一个动态工作的代码。 有什么建议用jQuery来做到这一点？

这是我实际解决方案的代码，但仅适用于最后一张图片

$(window).scroll(function(){  
$("img.scrollMenuNero").each(function(){
  if($(window).scrollTop()+$(".iconeNavbar").height()>$(this).offset().top + $(this).outerHeight() && !$(".divBarraLaterale").hasClass("open")){
    $(".divBarraLaterale a, .iconeNavbar, .divBarraLaterale i").css("color","#333");
    $(".imgNavBar").attr("src","/images/icona-navbar-nauticabluemarine-dark.png")
  }else{
    $(".divBarraLaterale a, .iconeNavbar, .divBarraLaterale i").css("color","#fff");
    $(".imgNavBar").attr("src","/images/icona-navbar-nauticabluemarine.png")
  }      
})
})