Fade In/Out On Scroll (simple code)

Basic code (Javascript + CSS) to make elements fade in and out on scroll, like the fixed header and share buttons on our website.

Fade In/Out On Scroll:

1. Change .yourDiv in snippet below into the element you wish to use
2. Adjust the number of scrolled down pixels (here 900) to your own
3. Add the code to body or head (in <script> </script> tags):

 jQuery(function( $ ){
    $(window).scroll(function() {
        var yPos = ( $(window).scrollTop() );

        if(yPos > 900) { // Show element after this amount of scrolled down pixels 

			$(".yourDiv").fadeIn();
		} else {
			$(".yourDiv").fadeOut();
		}
	});
});

Place in style.ccs:

.yourDiv{
    display: none;
/* Fixed CSS:
z-index: 9999;
position: fixed;
*/
}

Source: Sridhar Katakam, find extended code here

More funky snippets? Check out our post Useful functions.php snippets!

About

A WordPress wielding, cool rocking daddy in the lowlands. Web development & SEO, development and management of multisites.
Carpentry, Yoga & meditation.

Twitter Facebook WordPress ✉