Docs

[Tim]

Hi X,

I have a fixed top navbar. I have used this code in the custom javascript to achieve a different logo on scroll:

jQuery(function($) {
$(window).scroll(function() {
       if($('.x-navbar').hasClass('x-navbar-fixed-top')) {
               $('.x-navbar-fixed-top .x-brand img').attr('src','http://nlkraa-oyongdong.savviihq.com/wp-content/uploads/2016/05/kraamzorg-bebel-beeld.svg');
       }
});

});

You can check this out here (you need to log in to WordPress to see the te result because of maintenance plugin, i will send the login credentials in second post):

http://nlkraa-oyongdong.savviihq.com/

You can see that the logo on scroll is way to big. This is because it gets the logo width of the main logo in the customizer. Also when scrolling back to top, the logo does not turn back to the original one.

Then the third option; when scrolling, there is a nice transition on the background color of the navbar. This should be nice on the logo change to.

I know this is asked before but i cannot find the correct solution for this particular site.

Can you please help me out?

Cheers!

[Tim]

This reply has been marked as private.

[Joao]

Hi Tim

Regarding the logo coming back to the original when you scroll back up you could use this logo instead:

jQuery(function($) {
  $(window).scroll(function() {
 var scrollPos = $(window).scrollTop();
   if($(".x-navbar").hasClass("x-navbar-fixed-top") && scrollPos > 100) {
      $(".x-navbar-fixed-top .x-brand img").attr("src","http://nlkraa-oyongdong.savviihq.com/wp-content/uploads/2016/05/kraamzorg-bebel-beeld.svg");
   } else {
      $(".x-navbar-fixed-top .x-brand img").attr("src","http://nlkraa-oyongdong.savviihq.com/wp-content/uploads/2016/05/kraamzorg-bebel-logo.png");
   }
  });
});

I would recommend you using a smaller image for the second logo to solve the issue.

3- I am not sure what you mean, could you give us more details. But if you would like to change the color of navbar on scrolling you could use this code below:

CSS

 .x-navbar-wrap {
     height: auto !important;
}

 .x-navbar {
     background-color:transparent;
     border:0;
     box-shadow:none;
     position: fixed;
     width:100%;
}

 .x-navbar-solid {
     background-color:white;
}

JS

jQuery(function($) {
    $(window).scroll(function(){ 
        if($(window).scrollTop() >100) {
              $('.x-navbar').addClass("x-navbar-solid");
        }else {
              $('.x-navbar').removeClass("x-navbar-solid");
        }
    });
});

Hope that helps,

Joao

[Tim]

Hi there,

1. Works like a charm:)

2. I mean that when to logo changes to the second one, i would like to have a litte transition just like it’s changing the navbar to the white background right now

.x-navbar {
    transition: 0.2s all linear;
} 

Thanks!

[Rad]

Hi there,

It’s not possible, the transition is only applicable between two values of property. For example, from width 20px to width 300px.

Your logo is the same element where source image change. It’s changing from one image to another image by switching it’s source URL. And that is different than changing width, color, size, and etc.

Thanks!

[Tim]

Hi Rad,

I understand! There is one problem left. On mobile, when scrolling, the second image comes on screen.

How to solve this?

Thanks so much!

[Thai]

Hi There,

Please find this JS:

jQuery(function($) {
  $(window).scroll(function() {
 var scrollPos = $(window).scrollTop();
   if($(".x-navbar").hasClass("x-navbar-fixed-top") && scrollPos > 100) {
      $(".x-navbar-fixed-top .x-brand img").attr("src","http://nlkraa-oyongdong.savviihq.com/wp-content/uploads/2016/05/kraamzorg-bebel-beeld.svg");
   } else {
      $(".x-navbar-fixed-top .x-brand img").attr("src","http://nlkraa-oyongdong.savviihq.com/wp-content/uploads/2016/05/kraamzorg-bebel-logo.png");
   }
  });
});

And update to this:

jQuery(function($) {
	$(window).scroll(function() {
		var scrollPos = $(window).scrollTop(),
			width = $(window).width();
		if($(".x-navbar").hasClass("x-navbar-fixed-top") && scrollPos > 100 && width > 480) {
			$(".x-navbar-fixed-top .x-brand img").attr("src","http://nlkraa-oyongdong.savviihq.com/wp-content/uploads/2016/05/kraamzorg-bebel-beeld8.svg");
		} else {
			$(".x-navbar-fixed-top .x-brand img").attr("src","http://nlkraa-oyongdong.savviihq.com/wp-content/uploads/2016/05/kraamzorg-bebel-logo-main.svg");
		}
	});
});

Hope it helps 🙂

[Author]

Posts