How to change Wordpress logo when scrolling (understrap-child theme) - wordpress

Question

I'm building a website using understrap-child theme.
What I would like to achieve is my navbar logo (added through Appearance -> Customize) to change into another one when scrolling the page.
In functions.php I've already added a section in order to be able to add a second logo, which I've successfully added in the Appearance -> Customize section.
Here's the code in functions.php:
//ADDING NEW LOGO FIELD
function your_theme_customizer_setting($wp_customize) {
// add a setting
$wp_customize->add_setting('your_theme_hover_logo');
// Add a control to upload the hover logo
$wp_customize->add_control(new WP_Customize_Image_Control($wp_customize, 'your_theme_hover_logo', array(
'label' => 'Upload Hover Logo',
'section' => 'title_tagline', //this is the section where the custom-logo from WordPress is
'settings' => 'your_theme_hover_logo',
'priority' => 8 // show it just below the custom-logo
)));
}
add_action('customize_register', 'your_theme_customizer_setting');
get_theme_mod( 'your_theme_hover_logo' );
Now that I have two logos set, I would like to know how to replace the first logo with the second one when scrolling my page.
Here's my header.php section with the navbar:
<!-- ******************* The Navbar Area ******************* -->
<div id="wrapper-navbar">
<a class="skip-link sr-only sr-only-focusable" href="#content"><?php esc_html_e( 'Skip to content', 'understrap' ); ?></a>
<nav id="main-nav" class="navbar navbar-expand-md navbar-dark fixed-top" aria-labelledby="main-nav-label">
<h2 id="main-nav-label" class="sr-only">
<?php esc_html_e( 'Main Navigation', 'understrap' ); ?>
</h2>
<?php if ( 'container' === $container ) : ?>
<div class="container">
<?php endif; ?>
<!-- Your site title as branding in the menu -->
<?php if ( ! has_custom_logo() ) { ?>
<?php if ( is_front_page() && is_home() ) : ?>
<h1 class="navbar-brand mb-0"><a rel="home" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" itemprop="url"><?php bloginfo( 'name' ); ?></a></h1>
<?php else : ?>
<a class="navbar-brand" rel="home" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" itemprop="url"><?php bloginfo( 'name' ); ?></a>
<?php endif; ?>
<?php } else {
the_custom_logo();
} ?><!-- end custom logo -->
Please notice that I've already added a Query in order to change the navbar background color when scrolling...and that works!
</script>
<script>jQuery(window).scroll(function(){
jQuery('nav').toggleClass('scrolled', jQuery(this).scrollTop() > 80);
});</script>
with its CSS rules:
#media (min-width: 992px) {
.navbar.scrolled {
background-color: $secondary;
border-bottom: solid rgba(37, 36, 36, 0.055);
I really hope you can help me solve my problem!
THANK YOU SO MUCH!!