I have a sticky header that has an initial background color and a different background color on scroll. I have javascript that adds a .navbar-scroll
class to the following navbar upon scroll:
<nav id="nav" class="navbar navbar-fixed-top">
...
</nav>
The css looks like this:
.navbar {
background-color: #000;
}
.navbar-scroll {
background-color: #fff;
}
I have the following code in 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' );
I have the following code in 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 );
} );
} );
The problem I'm having is in the Customizer Live Preview. When the user changes either color, it injects the css style on that element and overwrites the existing style on that element. Therefore, the user can only see one color at a time. For example, if the initial Header Background Color is changed, that color will still be seen on scroll. If the Sticky Header Background Color is changed, only that color will be seen, whether user has scrolled or not. It will work fine on the front end once saved but I don't want to explain that bug to the user.
Is there a way to keep both styles active? Perhaps inject the css for each class in the head instead of inline?