Change x-brand img on scroll with a transition

[xbsmarketing]

Hello!

Through the forum I’ve found the following JQuery script to help me change my Brand/Logo image on a scroll event:

-----start-----
jQuery(function($) {
$(window).scroll(function() {
if($(’.x-navbar’).hasClass(‘x-navbar-fixed-top’)) {
$(’.x-navbar-fixed-top .x-brand img ‘).attr(‘src’,’/web/scroll-image.jpg’);
}else{
$(’.x-navbar .x-brand img’).attr(‘src’,’/web/original-image.jpg’);
}
});
});
-----end-----

This code seems to work flawlessly, but I’d like to see about making a simple fade our for the original logo and a fade in for the logo that appears when the page is scrolled.

URL is http://comdoc.cerebral-marketing.com

Any help is greatly appreciated!

Thanks!

[nabeel]

Hi there,

Thanks for writing in! Try replacing the above code with the following code:

jQuery(function($) {
	$(window).scroll(function() {
		if($('.x-navbar').hasClass('x-navbar-fixed-top')) {
			$('.x-navbar-fixed-top .x-brand img ').fadeOut('slow', function(){
				$('.x-navbar-fixed-top .x-brand img ').attr('src','/web/scroll-image.jpg');
				$('.x-navbar-fixed-top .x-brand img ').fadeIn('slow');
			});
        }else{
			$('.x-navbar-fixed-top .x-brand img ').fadeOut('slow', function(){
				$('.x-navbar .x-brand img').attr('src','/web/original-image.jpg');
				$('.x-navbar-fixed-top .x-brand img ').fadeIn('slow');
			});
        }
    });
});

Hope this helps!

[xbsmarketing]

Hi Nabeel,

It’s not quite working as desired. The images don’t seem to fade in smoothly and when you scroll back to the top the original image is not replaced.

[xbsmarketing]

Nabeel,

Doing some more investigating, I added a second brand logo to the header/nav bar through my child theme with this:

// =============================================================================
// Add a second logo to the navbar for different logo on scroll
// =============================================================================
//  
add_action('x_after_view_global__brand', 'second_logo_navbar');
function second_logo_navbar () {
  $output = '<a href="URL" class="second-logo"><img src="/wp-content/uploads/2018/05/comdoc-a-xerox-company-horizontal-logo-100px-h.png" alt="IMAGE_ALT"></a>';
  echo $output;
}

After I had that going, I did the following in the JS customizer:

jQuery(function($){

$(window).scroll(function() {
   
	if($('.x-navbar').hasClass('x-navbar-fixed-top')) {
    $('.x-navbar .x-brand img').fadeOut(500, function(){$('.second-logo').fadeIn(500);});
    
		}
	else{
    $('.second-logo').fadeOut(500, function(){$('.x-navbar .x-brand img').fadeIn(500);}); 	 
	}
	});
});

It all seems to be working good, but could you check it on your end to see if it looks good to you?

[ruenel]

Hey There,

There is a JS error on the JS code. Please have it updated and use this:

(function($){
  if ($(window).width() > 960) { 
      
    $(window).scroll(function() {
       
      if ($('.x-navbar').hasClass('x-navbar-fixed-top')) {
        $('.x-navbar .x-brand img').fadeOut(250, function(){$('.second-logo').fadeIn(250);});
      } else {
        $('.second-logo').fadeOut(250, function(){$('.x-navbar .x-brand img').fadeIn(250);});    
      }

    });
      
  };
})(jQuery);

Please let us know how it goes.

[xbsmarketing]

Hi RueNel!

Everything seems to good be as far as the logos switching when scrolled, but ideally I only want this to happen on larger screen sizes. I was going to use a different logo (horizontal) on mobile viewports and use media queries for this.

While the JQuery function seems to say to only run on screen widths wider than 960px, it still runs on all sizes.

Any ideas?

Thanks so much!

[ruenel]

Hello Again,

So that the JS code will work only in smaller screens, you will have to add the condition inside the scroll event. You may update the code again and use this:

(function($){
  
  $(window).on('scroll resize', function() {

    if ( $(window).width() > 960 ) { 
     
      if ($('.x-navbar').hasClass('x-navbar-fixed-top')) {
        $('.x-navbar .x-brand img').fadeOut(250, function(){$('.second-logo').fadeIn(250);});
      } else {
        $('.second-logo').fadeOut(250, function(){$('.x-navbar .x-brand img').fadeIn(250);});    
      }

    }
      
  });
})(jQuery);

Hope this helps.

[xbsmarketing]

Hi RueNel!

I think both of the code snippets you provided work. My mistake about the previous one, it was changing the logo on browser widths above 960, but only based off of the initial browser window I’m guessing; it worked fine on mobile and if I had a browser window sized below the argument prior to loading the site.

As far as I can tell, your new snippet works and performs when the window is resized as well.

Thank so you much! Take care!

[rad]

Glad to hear it’s working now, and you’re most welcome!