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;
}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();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.
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();
});