Es gibt verschiedene Anlässe, warum es sinvoll sein kann eine einfache Abfrage mit Java Script & jQuery durchführen zu wollen, ob ein Seitenelement gerade im Sichtfeld des Nutzers liegt. Auf ELEXPRESS.de nutze ich diese Funktion z.B. um bei erreichen der verwandten Beiträge diese Links einmal durchzublinken, sowie um den Lesertipp hervorzuheben. In E-Commerce Projekten setzen wir dieses Feature z.B. dafür ein, dass ein Nutzer, sobald dieser fast bis zum Seitenende gescrollt hat, noch einmal die zuletzt angesehenen Produkte angezeigt bekommt.

Hier der Code für die jQuery Funktionserweiterung, den ihr einfach eurer .js Datei hinzufügen müsst:

jQuery.fn.isOnScreen = function()
{
	var win = jQuery(window);

	var viewport = {
		top : win.scrollTop(),
		left : win.scrollLeft()
	};
	viewport.right = viewport.left + win.width();
	viewport.bottom = viewport.top + win.height();

	var bounds = this.offset();
	bounds.right = bounds.left + this.outerWidth();
	bounds.bottom = bounds.top + this.outerHeight();

	return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));

};

Folgendermaßen kann nun abgefragt werden, ob ein Element gerade im Sichtfeld des Nutzers liegt.

jQuery(window).scroll(function()
{
	if(jQuery('#element').isOnScreen())
	{
		//Hier passiert etwas, wenn #element im Sichtfeld liegt
	}
}
Beratung zur Conversion Optimierung (CRO) »Einführung in die Conversion Optimierung & Testverfahren inkl. Beispiel zu den Auswirkungen der Conversionrate und den häufigsten Fehlern, die wohl in 95 % der Conversion Tests begangen werden. Kostenlose CRO-Erstberatung vom Experten.

ELEXPRESS.de Tipp: Kostenlose Online Marketing Tools wie z.B. ein Google Adwords Keyword Generator, ein SEO Webseiten Quick-Test inkl. Besucher Prognose, Social Signals Check oder auch Mod_Rewrite Generator z.B. für 301 Redirects und Keyword Density & Text Analyse Werkzeug.