Mit jQuery prüfen ob das aktuelle Element im sichtbaren Bereich ist

In diesem Tutorial möchte ich euch zeigen, wie ihr mit jQuery prüfen könnt, ob ein Element im sichtbaren Bereich ist. Der Code hierzu ist sehr überschaubar, kann aber nach belieben angepasst und erweitert werden.

Prüfen ob Element im sichtbaren Bereich ist

Hinweis: kopiert bitte den Code von unten und nicht aus der Beispielbox oben!

// Inview
jQuery('div#scrollWrapper').scroll(function() {
	inview();
});

function inview() {
	var scrollTop	=	jQuery('div#scrollWrapper').scrollTop();    
	jQuery('div#scrollWrapper div').each(function(){
		if( jQuery(this).offset().top +( jQuery(this).height() / 2 )  > scrollTop ) {
			 if ( !jQuery(this).hasClass('inview')) {
				jQuery('div#scrollWrapper div').removeClass('inview');
				jQuery(this).addClass('inview');
			}
			return false;				
		}
	}); 
} inview();

#scrollWrapper {
	width: 100%;
	height: 300px;
	overflow: auto;
	padding: 24px;
}
#scrollWrapper div {
	width: 100%;
	height: 300px;
	border: 1px solid #5dd39e;
	margin: 12px 0;
}
#scrollWrapper div.inview {
	background: #5dd39e;
}

Keine Produkte gefunden.

So geht’s

Mein Beispiel oben ist nicht ganz so genau. Das liegt daran, dass ich den scrollTop vom Div ermitteln muss und nicht vom oberen Bildschirmrand.

Erstellen einer Funktion

Zunächst einmal erstellt eine function. Ich habe sie inview() benannt. In dieser vergleicht Ihr den Abstand eurer aktuellen Scrollposition mit der des Elements im sichtbaren Bereich. Befindet sich das Element im sichtbaren Bereich und hat noch nicht die Klasse inview, so werden bei allen anderen Elementen diese Klasse entfernt und dem sichtbaren Element hinzugefügt.

function inview() {
	var scrollTop	=	jQuery(window).scrollTop();    // Ermittelt den Abstand vom Top

	// each - durchsucht euren Code nach den Elementen
	jQuery('div#scrollWrapper div').each(function() {
		
		// Prüfen, ob Element im sichtbaren Bereich ist
		if( jQuery(this).offset().top + ( jQuery(this).height() / 2 )  > scrollTop ) {

			 // Prüfen, ob das Element bereits die Klasse inview hat
			 if ( !jQuery(this).hasClass('inview')) {
				jQuery('div#scrollWrapper div').removeClass('inview');
				jQuery(this).addClass('inview');
			}
			
			// Nach dem ersten gefundenem Element wird die each abgebrochen
			return false;				
		}
	}); 
} inview();

Keine Produkte gefunden.

Aufrufen der function beim scrollen

Anschließend müsst Ihr die function inview() nur noch bei jedem scrollen der Seite aufrufen. Kopiert dazu einfach den folgenden Code:

jQuery(window).scroll(function() {
	inview();
});

Nun prüft die Funktion jederzeit, ob das Element beim scrollen in den sichtbaren Bereich kommt und fügt diesem eine Klasse hinzu. Auf diese könnt Ihr beispielsweise mit Animationen reagieren. Eurer Kreativität sind dabei keinerlei Grenzen gesetzt.