The other night I wanted to add a mini ‘Daniel Stuart’ logo on my site’s top navigation bar. The idea was that this would maintain my branding but the real magic is to only show the mini logo once the user scrolls passed the large logo.

A look at the xHTML

Below is a look at the xHTML placed in the top bar. I have set the display to none so it does no show up initially.

<div id="miniLogo" style="display: none">
	<a href="http://danielstuart.ie">
		<img src="images/miniLogo.png" alt="Daniel Stuart"/>
	</a>
</div>

jQuery to the rescue

I have used scrollTop() to determine how far down the user has scrolled. According to my template design, I want the logo to fade in when the user has scrolled down 100 pixels or more. Also, I want the logo to fade away when the user scrolls back up to the top.

I have set up a boolean variable to check it the user has scrolled past the main logo as I only want to initiate fadeIn and fadeOut once.

I also used jQuery.noConflict(); to avoid any issues with any other scripts I am using.

var $scrolled = new Boolean(false);
jQuery.noConflict();
jQuery(window).scroll(function () {
	position = jQuery(window).scrollTop();
	if(position >=100 && $scrolled == false){
		$scrolled = new Boolean(true);
		jQuery('#miniLogo').fadeIn('slow', function() { });
	}else if(position <100 && $scrolled == true){
		$scrolled = new Boolean(false);
		jQuery('#miniLogo').fadeOut('slow', function() { });
	}
});

So check it out above, scroll down a bit past the main logo and watch the magic happen!