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!

  • HTML
  • JS
  • CSS
// 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.

revilodesign oli

1 Kommentar

Schreibe ein Kommentar zu Mit jQuery prüfen ob das aktuelle Element im sichtbaren Bereich ist

  1. avatar gertGert sagt:

    Ich möchte nur den div #test1 am Ende einer Seite mit dem Ereignis verknüpfen und habe ihn zum testen mit einem alert() versehen.
    Dazu habe ich die Zeile:
    if( jQuery(this).offset().top – ( jQuery(this).height() ) > scrollTop )
    etwas abgeändert. Aber das alert kommt immer, außer wenn mein div #test1 den oberen Rand durchbrochen hat.
    Was läuft da schief?
    Ich freue mich von dir zu hören, Vielen Dank Gert

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

    // each – durchsucht euren Code nach den Elementen
    jQuery(‚#test1‘).each(function() {

    // Prüfen, ob Element im sichtbaren Bereich ist
    if( jQuery(this).offset().top – ( jQuery(this).height() ) > scrollTop )
    {
    // Prüfen, ob das Element bereits die Klasse inview hat
    if ( !jQuery(this).hasClass(‚inview‘))
    {
    jQuery(‚#test1‘).removeClass(‚inview‘);
    jQuery(this).addClass(‚inview‘);
    }

    alert(„x“);
    // Nach dem ersten gefundenem Element wird die each abgebrochen
    return false;
    }
    });
    }

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

Hinterlasse ein Kommentar zum Beitrag "Mit jQuery prüfen ob das aktuelle Element im sichtbaren Bereich ist"

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Letzte Aktualisierung am 24.04.2024 / Affiliate Links / Bilder von der Amazon Product Advertising API

Follow Me

doch mal auf Instagram