What should I do to change the logo image on scroll event? I have tried using this code but it's not working, can anyone point out my mistake?
Here is the PHP/HTML:
<a class="logo" href="<?php echo esc_url( home_url( '/' ) ); ?>" data-fixed-height="<?php echo esc_attr( et_get_option( 'fixed_nav_logo_height', '51' ) ); ?>">
<img src="<?php echo esc_attr( $logo ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>" id="logo" />
</a>This is the jQuery:
<script>
( document ).ready(function() {
('.ie #main-header #logo').attr('src','my_logo_image_url');
(window).scroll( function () {
('body:not(.ie) #main-header #logo').not('.et-fixed-header').attr('src','my_logo_image_url');
('body:not(.ie) #main-header.et-fixed-header #logo').attr('src','my_alternative_logo_image_url');
});
});
</script>