Javascript 使用jQuery的窗口顶部

我试图根据视口顶部的div来更改徽标的颜色。它在一定程度上起到了作用，但在第二次询问时，它的颜色似乎变为“早”，而不是在最后一个“联系人部分”div点击浏览器顶部时

这里可以看到一个例子

JS如下所示

var distance2 = $('#contact-details').offset().top,
$window = $(window);

if ($("#content").length) {  
    var distance = $('#content').offset().top,
    $window = $(window);

$window.scroll(function() {   
    if ( $window.scrollTop() >= distance ) {
        $("#main-header img").css({filter : "invert(100%)"});
        $(".mobile_menu_bar").addClass("black-menu");
    }  
    if ( $window.scrollTop() <= distance ) {
        $("#main-header img").css({filter : "invert(0%)"});
        $(".mobile_menu_bar").removeClass("black-menu");
    } 
    if ( $window.scrollTop() >= distance2 ) {
        $("#main-header img").css({filter : "invert(0%)"});
        $(".mobile_menu_bar").removeClass("black-menu");
    } 
});

var distance2=$（'#联系方式'）.offset（）.top，
$window=$（window）；
如果（$（“#内容”）.length）{
变量距离=$（“#内容”）.offset（）.top，
$window=$（window）；
$window.scroll（函数（）{
如果（$window.scrollTop（）>=距离）{
$（“#主标题img”）.css（{filter:“invert（100%）”}）；
$（“.mobile\u menu\u bar”）.addClass（“黑色菜单”）；
}  
如果（$window.scrollTop（）=距离2）{
$（“#主标题img”）.css（{filter:“invert（0%）”}）；
$（“.mobile\u menu\u bar”）.removeClass（“黑色菜单”）；
} 
});

有什么想法吗？谢谢你的帮助

---

谢谢。

动态执行此操作可能需要Javascript，但我确实发现以下内容可能会有所帮助：我没有时间仔细阅读，所以我想在评论中分享一下：）请提供当前代码（至少是JS部分）因此，我们可以尝试了解这里发生了什么。上面添加了JS代码。感谢您的关注。