Fade In/Out On Scroll (simpele code)

Eenvoudige code (Javascript + CSS) om elementen on scroll te laten verschijnen en verdwijnen, zoals de fixed header en share buttons op de onze website.

Fade In/Out On Scroll:

1. Verander .jouwDiv in onderstaande code met het element dat je wilt gebruiken
2. Pas het aantal pixels (hier 900) aan naar je wensen
3. Voeg de code toe aan body of head (in <script> </script> tags):

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

        if(yPos > 900) { // Laat het element zien na zoveel pixels gescrolled te hebben

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

Plaats in style.ccs:

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

Bron: Sridhar Katakam, uitgebreide code hier

About

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

Twitter Facebook WordPress ✉