我有一个粘性标题，它有一个初始背景色和一个不同的滚动背景色。我的javascript添加了.navbar-scroll 滚动时，将类设置为以下导航栏：

<nav id="nav" class="navbar navbar-fixed-top">
    ...
</nav>

css如下所示：

.navbar {
    background-color: #000;
}

.navbar-scroll {
    background-color: #fff;
}

我在customizer中有以下代码。php：

// Header Background Color
$wp_customize->add_setting( \'header_background_color\', array(
    \'default\'           => \'#000\',
    \'transport\'         => \'postMessage\'
) ); 
$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, \'header_background_color\', array(
    \'label\'             => __( \'Header Background Color\', \'my-theme\' ),
    \'section\'           => \'title_tagline\',
    \'settings\'          => \'header_background_color\',
) ) );

// Sticky Header Background Color
$wp_customize->add_setting( \'sticky_header_background_color\', array(
    \'default\'           => \'#fff\',
    \'transport\'         => \'postMessage\'
) ); 
$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, \'sticky_header_background_color\', array(
    \'label\'             => __( \'Sticky Header Background Color\', \'my-theme\' ),
    \'section\'           => \'title_tagline\',
    \'settings\'          => \'sticky_header_background_color\',
) ) );

function header_output() {
    <style type="text/css">
    .navbar { 
        background-color: <?php echo get_theme_mod( \'header_background_color\' , \'#000\' ); ?>;
    }
    .navbar-scroll { 
        background-color: <?php echo get_theme_mod( \'sticky_header_background_color\' , \'#fff\' ); ?>;
    }
    </style>
} 
function generate_css( $selector, $style, $mod_name, $prefix=\'\', $postfix=\'\', $echo=true ) {
    ... // I\'ll omit this code here
}
add_action( \'wp_head\' , \'header_output\' );

我在customizer中有以下代码。js公司：

// Background Color
wp.customize( \'header_background_color\', function( value ) {
    value.bind( function( newval ) {
        $(\'.navbar\').css( \'background-color\', newval );
    } );
} );

// Sticky Background Color
wp.customize( \'sticky_header_background_color\', function( value ) {
    value.bind( function( newval ) {
        $(\'.navbar-scroll\').css( \'background-color\', newval );
    } );
} );

我遇到的问题是在Customizer Live预览中。当用户更改任一颜色时，它会在该元素上注入css样式，并覆盖该元素上的现有样式。因此，用户一次只能看到一种颜色。例如，如果更改了初始标题背景颜色，则该颜色仍将显示在滚动上。如果更改了粘性标题的背景颜色，无论用户是否滚动，都只会看到该颜色。一旦保存，它将在前端正常工作，但我不想向用户解释这个bug。

有没有办法保持这两种样式都处于活动状态？也许在头部为每个类注入css，而不是内联？

/**
 * Print styles.
 */
public function print_styles() {
    echo \'<style id="wpse-286268" type="text/css">\';
    $css = $this->stylesheet_template;
    $tpl_vars = array();
    foreach ( $this->device_configs as $slug => $params ) {
        $tpl_vars[ \'{{outline_color_\' . $slug . \'}}\' ] = get_theme_mod( "outline_color_{$slug}", $params[\'default\'] );
    }
    echo esc_html( str_replace(
        array_keys( $tpl_vars ),
        array_values( $tpl_vars ),
        $css
    ) );
    echo \'</style>\';
}

/**
 * Update preview.
 *
 * @returns {void}
 */
component.updatePreview = function updatePreview() {
    var css = component.stylesheetTemplate;
    _.each( component.deviceSettings, function( setting ) {
        css = css.replace( \'{{\' + setting.id + \'}}\', setting.get() );
    } );
    component.style.text( css );
};