Sticky Elements (Like floating Nav)

[jamesg89]

Hi All,

I really like what Turnkey Slider did with their sticky search function that fades in to full screen when you scroll down the page. If anyone knows what tricks they are using, even if you post a link to jQuery tutorials on these effects (change to full width, fade in, scroll down) that would be much appreciated!

I am currently using a plugin for a similar effect but it just isn't behaving exactly the way I would like (see below for link).

Cheers,
James

http://www.vancouverlistingsearch.com/

[Chantal Coolsma]

You can solve this using CSS3 and a little jQuery code. I used code below for the navigation area:

jQuery(function( $ ){
	$(window).scroll(function() {
		var yPos = ( $(window).scrollTop() );
		if(yPos > 50) { // show sticky menu after screen has scrolled down 200px from the top
			$(".nav-secondary").css({ 'position': 'fixed', 'top':0, 'left':0, 'z-index':100 });
		} else {
			$(".nav-secondary").css({ 'position': 'relative' });
		}
	});
});

For a nice slide in, you can use the CSS transition property.

[Author]

Posts