我正在将静态站点迁移到WP。目前，我有一个标题功能，可以使用JS在用户滚动时将反转的徽标更改为全色。See Function on scroll

Current JS for Scroll function:

$(window).scroll(function() {
    var top = $(window).scrollTop();

    //Clears navbar timing functions on initial scroll
    clearTimeout(timeout);

    //Conditional to make function run if header is scroll pased 100px
    if ((top > 100) && $(\'#mainNav\').is(\':hidden\')) {
        showNav();
        timeout = setTimeout(hideNav, 2000);
    } else if ((top > 100) && $(\'#mainNav\').is(\':visible\')) {
        showNav();
        $(\'#logo\').attr(\'src\', \'./assets/sg-logo-inverted.svg\');
        $(\'.nav-trigger-line\').css({\'background-color\':\'#fff\'});
    } else {
        $(\'header\').css({
            \'background-color\': \'transparent\'
        });
        $(\'#logo\').attr(\'src\', \'./assets/sg-logo-inverted.svg\');
        $(\'#logo\').css({\'width\': \'175px\'});
        $(\'.nav-trigger-line\').css({\'background-color\':\'#fff\'});
    }
});

Current HTML Markup:

<header class="fixed-top p-3">
    <!-- Logo and Burger -->
    <div class="container-fluid brand-wrap">
        <div class="row">
            <div class="col-6">
                <a href="index.html"><img id="logo" src="./assets/sg-logo-inverted.svg" class="img-fluid" alt="Synchrony Group"></a>
            </div>
            <div class="col-6 trigger-wrapper py-1">
                <div id="burger">
                    <div class="nav-trigger-line"></div>
                    <div class="nav-trigger-line"></div>
                    <div class="nav-trigger-line"></div>
                </div>
            </div>
        </div>
    </div>
</header>

我已经修改了标题中的标记。通过WP仪表板动态包含站点徽标的php文件：

Revised HTML Markup:

<header class="fixed-top p-3">
    <!-- Logo and Burger -->
    <div class="container-fluid brand-wrap">
        <div class="row">
            <?php if ( get_header_image() ) : ?>
                <div class="col-6">
                    <a href="<?php echo esc_url( home_url( \'/\' ) ); ?>" rel="home">
                        <img id="logo" src="<?php header_image(); ?>" class="img-fluid" alt="Synchrony Group">
                    </a>
                </div>
            <?php endif; ?>
            <div class="col-6 trigger-wrapper py-1">
                <div id="burger">
                    <div class="nav-trigger-line"></div>
                    <div class="nav-trigger-line"></div>
                    <div class="nav-trigger-line"></div>
                </div>
            </div>
        </div>
    </div>
</header>

滚动功能仍能工作，但无法替换图像，因为它在页面的特定目录中查找图像，而该目录不存在。

Question: 如何动态更改滚动上的徽标功能？这是由PHP而不是JS处理的吗。进行此操作的正确方法是什么？