Logo Appear upon scrolling to a specific location

Is there a way to make the logo (top left) appear after you scroll to a certain location of the home page?

bookspring.io

Where “Welcome to Bookspring” is now, I would like our logo but I am trying to avoid having the same logo visible in both locations. Once I scroll to the first section I would like the logo to appear in upper left.

I am assuming that this Could be used, but instead of changing I would just make visible or not - however this does not seem to work in Perth…Should it?

So I added this, and the display: none works, but does not appear when scrolled - any ideas?

I used the custom CSS plugin to add this.

.site-logo{
display: none;
}
.header-scrolled .site-branding a{
display: inline-block;
width: 231px;
height: 120px;
background: url(‘http://bookspring.io/wp-content/uploads/2016/01/bookspring_logo.png’) no-repeat;
background-size: 100%;
}

Hello there,

I would like to apologize in advance for the delayed respond.

In order to achieve that objective, could you please try to do the following?

  1. Install and activate the Header and Footer Scripts plugin
  2. Go To Settings > Header and Footer Scripts panel
  3. Paste the following code into the provided Scripts in footer box
<script>

(function($){

    "use strict";
		$(window).on('load scroll', function() {
			var y = $(this).scrollTop();
			if ( y >= 700 ) {
				$('body.home').addClass('scrolled');
			} else {
				$('body.home').removeClass('scrolled');
			}
		});    

})(jQuery);

</script>
  1. Paste the following to the “Scripts in header:” box
<style>
.scrolled .site-branding a{
  display: inline-block;
  width: 231px;
  height: 120px;
  background-image: url(‘http://bookspring.io/wp-content/uploads/2016/01/bookspring_logo.png’) ;
  background-repeat: no-repeat;
  background-size: 100%;
}
</style>
  1. Save settings

You would need to clear your browser’s cache before reloading your site.

Let me know how it goes.

Regards,
Kharis

Thanks for getting back to me, I have added the above, and the site appears to change now, but not to the desired function.

Just to clarify, No site logo is there until you scroll down then it appears.

Hello there,

Try to hide the default logo once the page scrolled to the certain distance with the following CSS code:

.scrolled .site-branding a img{
   opacity: 0;
}

Make sure your image background exists.

Regards,
Kharis

I have tried adding that to both the custom css and header still with no change.

Scratch that, missed a (.) however it is acting in reverse - is there until I scroll, then disappears, would like it the opposite, not there until I scroll.

Hello there,

I would like to apologize in advance for the delay.

Try to apply the following CSS code:


.site-branding a img{
   opacity: 0;
}

.scrolled .site-branding a img{
   opacity: 1;
}

Let me know how it goes.

Regards,
Kharis

Thanks that works great! Would\should it be working the same way on the mobile version?