Question

我有一个滚动导航菜单（WP网站）。默认情况下，我的徽标为绿色。当用户滚动时，出现白色背景。

但是-在一些屏幕上，我需要起始徽标为白色。我已经想出了如何创建替代导航的方法，但是一旦用户滚动并且出现背景颜色，我就需要将该徽标恢复为绿色（这我无法确定）。

我猜代码是这样写的：“如果页面使用AltNav，则在固定导航上使用徽标白色”，但是我不知道该怎么写。

导航

<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中，每个页面都有一个类，您可以使用该类来更改徽标的背景颜色，例如：

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

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

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

在滚动条上更改导航徽标

1 个答案: