滚动带有data-attribute的部分时更改导航文本颜色

Question

我的网站有全屏图像标题部分（标题数据属性=“图像”）和带有白色背景的部分（没有数据属性）。我的导航的默认颜色（没有背景颜色）是白色。当我滚动图像时这很好。但是当我用（data-attribute =“image”）滚动标题部分时，我想更改导航的文本颜色（给出类“.black-text”），反之亦然。这些部分没有固定的高度，因为部分的内容可能会发生变化。

到目前为止，这是我的jQuery。这可以只用jQuery来完成，还是需要另一个JS插件？

jQuery(window).on('scroll', function() {
    jQuery('header').each(function() {
        if(jQuery(window).scrollTop() >= jQuery(this).offset().top) {
            var image = jQuery(this).attr('*[data-type="image"]');
            jQuery('.site-header .navigation a').addClass('black-text');
        } else {
            jQuery('.site-header .navigation a').removeClass('black-text');
        }
    });
});