How can I change a logo with scroll (twice) to specific locations?

This JavaScript below worked, but it triggered the logo change after 500px (that >=500 value is a favored trigger, I suppose?) I want the logo change to trigger once a particular <div> reaches top of page. I thought, maybe this would work ...

if(!scroll.hasClass("red-area")){ ...
... but it did not! :-)

And I want the logo to change twice — we'll say red-logo and yellow-logo, where blue-logo is the original (so when each respective <div> hits top of page, that corresponding logo appears, blue-logo disappears) thereafter for rest of page, blue-logo comes back.

Any thoughts much appreciated!
Best, Mary

$(function() { var logo = $("blue-logo"); $(window).scroll(function() {
var scroll = $(window).scrollTop();

if (scroll >= 500) {
if(!logo.hasClass("red-logo")) {
logo.hide();
logo.removeClass("blue-logo").addClass("red-logo").fadeIn( "slow");
}
} else {
if(!logo.hasClass("blue-logo")) {
logo.hide();
logo.removeClass("red-logo").addClass("blue-logo").fadeIn( "slow");
}
}

});
});