Vielen Dank für Ihre Anfrage!
Kontakt /
Offene Fragen?
schließen
05251 / 69 410 - 00
  • Kostenlose Erstberatung anfordern
  • Unverbindliches Angebot einholen
  • Ihr Wegbereiter für Umsatzwachstum
  • Nachhaltig mehr Bekanntheit erzielen
  • Rentabel und messbar zum Web-Erfolg

* bei diesen Eingaben handelt es sich um Pflichtfelder

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

Jetzt Online-Marketing Newsletter abonnierenZukünftig kostenlose Newsletter unserer Experten erhalten!

  • 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

Stadt Paderborn Logo
DieboldNixdorf Logo
H&M Logo
Naturstein Risse Logo
KRENZ Autohaus und Werkstatt Logo
StadtwerkeBielefeld Logo
testsiegertarife Logo
Uni-Paderborn Logo
Zecher Logo