My website http://spoleta.com/ has an animated SVG logo in the header that is being controlled by this JavaScript.
jQuery(document).ready(function($){
$(window).scroll(function() {
var scrollPos = $(window).scrollTop();
navbar = $('.x-navbar');
if (scrollPos > 1) {
navbar.addClass('alt-color x-navbar-fixed-top');
$('.x-brand img').attr('src','/wp-content/uploads/2018/06/spoleta_logo_reverse2.svg');
} else {
navbar.removeClass('alt-color x-navbar-fixed-top');
$('.x-brand img').attr('src','/wp-content/uploads/2018/06/spoleta_logo_forward.svg');
}
});
});
It works the first time you scroll up and down but then the animations seem to get “stuck”. Can anyone point me in the right direction? For every pixel you scroll it’s either make the src of the image one image or the other. So I think it’s making like a queue as you scroll.