✔ Funktion bei scroll bis Div ausführen

K

kourty

Mitglied
Hallo,

das wurde wahrscheinlich schon mehrmals gefragt, ich weiß aber nicht wonach ich suchen soll, deswegen wärs schon super wenn ihr mir einfach Keywords schreibt, wie das Ganze heißt.

Und zwar möchte ich eine Funktion ausführen, wenn bis auf die Höhe eines Div´s gescrollt wurde. Also nicht onSroll, das tritt ja ein wenn das Div gescrollt wird, sondern sowas ähnliches.

Es gäbe natürlich die Möglichkeit, sekündlich mit pageYOffset zu ermitteln, wie weit gescrollt wurde, das finde ich aber ziemlich unelegant.
 
Zuletzt bearbeitet:
Wie wäre es, wenn du deine erste Idee mit deiner zweiten verbindest? Also das du das PageYOffset immer nur dann ermittelst, wenn das Ereignis onscroll eintritt?
 
Hallo kourty,

wenn ich dich richtig verstehe, willst du eine Aktion ausführen, wenn die Seite soweit gescrollt wurde, dass ein DIV eine bestimmte Position erreicht hat. In dem Fall solltest du das Element überwachen, welches gescrollt wird. Ein einfaches Beispiel würde dann so aussehen.
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
  <title>Funktion bei scroll bis Div ausführen</title>
  <style type="text/css">
    #container_div {
      height: 2000px;
      padding-top: 400px
    }
    #target_div {
      height: 200px;
      width: 100%;
      border: 2px dotted red;
      text-align: center;
    }
  </style>
  <script type="text/javascript">
    window.document.onscroll = function(){
      if (window.pageYOffset > 400) {
        document.getElementById("target_div").style.borderColor = "lime";
      } else {
        document.getElementById("target_div").style.borderColor = "red";
      }
    };
  </script>
</head>
<body>
  <div id="container_div">
    <div id="target_div"><h2>target div</h2></div>
  </div>
</body>

Hoffe das hilft dir weiter.

Grüße, K.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück