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

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

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

Meinungen zum Artikel

Hinterlassen Sie einen Kommentar

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

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

Wir verwenden Cookies und andere Tracking-Technologien, um Ihr Browsererlebnis auf unserer Website zu verbessern, personalisierte Inhalte und gezielte Anzeigen anzuzeigen, den Website-Traffic zu analysieren und zu verstehen, woher unser Publikum kommt. Um mehr zu erfahren oder sich abzumelden, lesen Sie bitte unsere Datenschutzerklärung.

Mit der Wahl von "Ich akzeptiere" stimmen Sie der Verwendung von Cookies und anderen Tracking-Technologien zu. Alternativ können Sie auch nur wesentliche oder funktionale Cookies akzeptieren.

Impressum