Vielen Dank für Ihre Anfrage!
Poste den ersten Kommentar

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 unserer Website nutzen wir 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 Sie einfach Ihrer .js-Datei hinzufügen müssen:

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
 }
}

Können wir Ihnen helfen?Wir beantworten gerne Ihre Fragen!

* bei diesen Eingaben handelt es sich um Pflichtfelder

Versüßen Sie sich Ihr Wochenende...mit kostenlosen Newslettern unserer Experten!

  • Wir teilen unser Know-how mit Ihnen
  • Kostenlose Inhalte
  • Tipps & Tricks zu Marketing, Design & E-Commerce

Meinungen zum Artikel

Hinterlassen Sie einen Kommentar

Unsere Kunden-Referenzen Mehr als 15 Jahre Expertise in unterschiedlichen Branchen

BIHome Logo
Stadt Paderborn Logo
DieboldNixdorf Logo
H&M Logo
Naturstein Risse Logo
KRENZ Autohaus und Werkstatt Logo
Schaefers Fussboden Logo
Casada healthcare Logo
StadtwerkeBielefeld Logo
testsiegertarife Logo
Uni-Paderborn Logo
Zecher Logo