I'm trying to change a logo depending on which section it passes through --light logo on dark section and vice versa-- by using the jQuery scrollTop. The first rule executes correctly, the logo changes after 450, but the second rule doesn't execute at 470, which is odd since the else works fine. The logo changes back to its original state. Here's my WP JS snippet:

jQuery(document).on('scroll', function() {
    if (jQuery(this).scrollTop() > 450) {
        jQuery('.navbar-brand img').attr('src','http://localhost/site/wp-content/uploads/2021/09/mini-logo.png');
    } else if (jQuery(this).scrollTop() > 470) {
        console.log("it works");
        jQuery('.navbar-brand img').attr('src','http://localhost/site/wp-content/uploads/2021/09/dark-f-logo.png');
    } else {
        jQuery('.navbar-brand img').attr('src','http://localhost/site/wp-content/uploads/2021/09/dark-f-logo.png');
    }
});

Thanks for taking a look.