顶部的窗口与jQuery

Question

我试图根据视口顶部的div更改徽标的颜色。它在一定程度上工作，但在第二次询问它似乎是提前改变颜色而不是最后一次＆＃34;接触部分＆＃34; div击中浏览器的顶部？

此处可以看到示例...... http://rankinfilm.mintfresh.co.uk/project/roy-rogers/

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");
    } 
});

有什么想法吗？任何帮助表示赞赏。

感谢。