Add class to header when some div touch the top of browser

I’m trying to change a class of header when some element touch top of page. If div is background white to add header class black, so text will be visible. This code only works one time even if multi .header-hover is on page. .header-hover add class black, .remove-header remove class black and then next .header-hover do nothing.

   $(document).ready(function(){
        $(window).on("scroll", function() {
            $('.header-hover').each(function(){
                var offset = $(this).offset().top - $(window).scrollTop();
                if (offset <= 0) {
                    $("header").addClass("black");
                }
            })
        });
        $(window).on("scroll", function() {
            $('.remove-header').each(function(){
                var offset = $(this).offset().top - $(window).scrollTop();
                if (offset <= 0) {
                    $("header").removeClass("black");
                }
            })
        });
    });