Secondary logo on scroll in Business Pro

In the members-only forum, a user asked:

I am working on a site using Business Pro. The have a logo that is grey that they want to use on the transparent header.

It doesn’t look good on the scroll down header but they really like the grey of the scroll down header. Is there a way to swap the logo with a white one when they scroll down so they have the best of both?

This tutorial provides the steps to add an alternate/secondary logo (hidden initially) below the main one in Business Pro using code from Corporate Pro.

In the scrolled position, the main logo will be hidden and the secondary logo shown.

Initial position:

Scrolled position:

Step 1

Prepare both the versions of your logo.

Primary - appears initially on page load
Secondary - appears when scrolled down

Step 2

In functions.php, locate

// Enable logo option in Customizer > Site Identity.
add_theme_support( 'custom-logo', array(
    'height'      => 100,
    'width'       => 300,
    'flex-height' => true,
    'flex-width'  => true,
    'header-text' => array( '.site-title', '.site-description' ),
) );

and set your logos' height and width values in the above.

Step 3

In includes/customize.php, below

// Add logo size control.
$wp_customize->add_control( new WP_Customize_Control(
    $wp_customize,
    'business_logo_size',
    array(
        'label'       => __( 'Logo Size', 'business-pro-theme' ),
        'description' => __( 'Set the logo size in pixels. Default is 100.', 'business-pro-theme' ),
        'settings'    => 'business_logo_size',
        'section'     => 'title_tagline',
        'type'        => 'number',
        'priority'    => 8,
    )
) );

add