Logo Transparent to Solid

[charlescthomson]

Hi,

I’m using the following to make my header transition from transparent to solid when scrolling.
I was wondering if you have any suggestions on how to modify it so that my Logo appears once the header is solid.

Any suggestions would be greatly appreciated!

jQuery(document).ready(function($){
  $('.x-navbar-fixed-top').css("background-color", "transparent");
  $(window).scroll(function(){
   if ($(this).scrollTop() > 400) {
    $('.x-navbar-fixed-top').css("background-color", "rgba(255,255,255,0.99)").css("transition","0.3s ease-in-out ");
   } else if ($(this).scrollTop() > 300) {
    $('.x-navbar-fixed-top').css("background-color", "rgba(255,255,255,0.75)").css("transition","0.3s ease-in-out ");
   } else if ($(this).scrollTop() > 200) {
    $('.x-navbar-fixed-top').css("background-color", "rgba(255,255,255,0.5)").css("transition","0.3s ease-in-out ");
   } else if ($(this).scrollTop() > 100) {
    $('.x-navbar-fixed-top').css("background-color", "rgba(255,255,255,0.35)").css("transition","0.3s ease-in-out ");
   } else {
    $('.x-navbar-fixed-top').css("background-color", "transparent").css("transition","0.3s ease-in-out ");
   }
  });
});

[thai]

Hi There,

Please note that custom coding is outside the scope of our support. Issues that might arise from the use of custom code and further enhancements should be directed to a third party developer.

Ideally, we will hide the logo on the website loads. When we scroll down over 400, the logo will be shown. Please update your custom JS to this:

jQuery(document).ready(function($){

	$('.x-brand').hide();
	$('.x-navbar-fixed-top').css("background-color", "transparent");

	$(window).scroll(function(){
		if ($(this).scrollTop() > 400) {
			$('.x-brand').show();
			$('.x-navbar-fixed-top').css("background-color", "rgba(255,255,255,0.99)").css("transition","0.3s ease-in-out ");
		} else if ($(this).scrollTop() > 300) {
			$('.x-navbar-fixed-top').css("background-color", "rgba(255,255,255,0.75)").css("transition","0.3s ease-in-out ");
		} else if ($(this).scrollTop() > 200) {
			$('.x-navbar-fixed-top').css("background-color", "rgba(255,255,255,0.5)").css("transition","0.3s ease-in-out ");
		} else if ($(this).scrollTop() > 100) {
			$('.x-navbar-fixed-top').css("background-color", "rgba(255,255,255,0.35)").css("transition","0.3s ease-in-out ");
		} else {
			$('.x-brand').hide();
			$('.x-navbar-fixed-top').css("background-color", "transparent").css("transition","0.3s ease-in-out ");
		}
	});
});

Hope that helps and thank you for understanding.