javascript - 在滚动条上更改导航标志

Question

我有一个滚动导航菜单(WP 站点)。默认情况下，我的 Logo 是绿色的。当用户滚动时，会出现白色背景色。

但是 - 在一些屏幕上，我需要起始 Logo 为白色。我已经想出如何创建替代导航，但我需要该 Logo 在用户滚动并且背景颜色出现后返回绿色(我无法弄清楚)。

我猜代码是这样写的，“如果页面使用 AltNav，则在固定导航上使用 logo-white”，但我自己不知道怎么写。

导航

<nav class="nav <?php isAltNav() ? _e('alt-nav') : null; ?>" id="nav">
    <a class="nav-logo" href="/"><img src="<?php bloginfo('template_directory') ?>/assets/img/logo-<?php _e(isAltNav() ? 'white' : 'green'); ?>.svg" alt="logo"></a>
</nav>

以白色导航开头的页面

function isAltNav() {
    $_pages = array(
        'page1', 'page2', 'page3', 'page4'
    );
}

SCSS

&-fixed {
    background-color: rgba($white, 0.95);
    color: $white !important;
    position: fixed;
    opacity: 0;
}

Answer 1

在 WP 中，每个页面都有一个类，您可以使用该类来更改 Logo 的背景颜色，例如:

.id-11 .logo {
    background-colour: #FFF
}

使用 jQuery，您可以使用滚动事件并更改滚动背景:

$(window).scroll(function() {
    $('.id-11 .logo').css('background-color','red');
});