Vielen Dank für Ihre Anfrage!
Jobsuche: jetzt bewerben!
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

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

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, unsere Webseite ist durch reCAPTCHA geschützt und es gelten die Google Datenschutzbedingungen und Nutzungsbedingungen

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

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

Lödige Industries Logo
Naturstein Risse Logo
DieboldNixdorf Logo
Uni-Paderborn Logo
Zecher Logo
DeinSportsfreund Logo
Aqua Tuning Logo
StadtwerkeBielefeld Logo
Stadt Paderborn Logo
testsiegertarife Logo
H&M Logo
Krenz Autohaus und Werkstatt Logo