switch menu color dynamically jquery

Question

I have a site with fixed top menu to top-left page, this menu is white and have transparent background. My page is divided in images with 100% of width of page and below the image there is text over the white background. I want to switch the color of the menu to black when scrolling over white part of page. Switch back to white when over images. I think that the best method to switch is to give breakpoints to image, so when the menu have a scroll height below the scroll top of page of top image the menu is black and when is over the scroll top of page of top image and below the scroll top of page of bottom image is white.

First example, white menu

Second example, black menu

Different page

P.s. I don't have a regular position of image/text because the pages of site is different in base of the context, so I need a code that work dynamically. Any suggestion with jquery to accomplish this?

Here's the code of my actual solution, but works only for the last image

$(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")
  }      
})
})