Javascript einmalig an bestimmter Position starten

[Driver08]

Hallo,

ich habe einen Counter auf meiner Webseite integriert. Jetzt wäre es super, wenn dieser einmalig aktiviert wird und zwar erst dann, wenn die jeweilige Position erreicht ist.

Folgenden Code habe ich dafür verwendet (Quelle stackoverflow)

Das scheint beinahe zu funktionieren. Leider wird das Script immer aktiviert, sobald gescrollt wird.

Danke schon einmal!

Gruß

$(window).scroll(function() {
    var hT = $('.counter').offset().top,
        hH = $('.counter').outerHeight(),
        wH = $(window).height(),
        wS = $(this).scrollTop();
     console.log((hT-wH) , wS);
     if (wS > (hT+hH-wH) && (hT > wS) && (wS+wH > hT+hH)){

==> ab hier beginnt der Counter
​​​​​​​
  $('.counter').each(function() {
      var $this = $(this),
        countTo = $this.attr('data-count');

      $({
        countNum: $this.text()
      }).animate({
          countNum: countTo
        },

        {
          duration: 5000,
          easing: 'linear',
          step: function() {
            $this.text(commaSeparateNumber(Math.floor(this.countNum)));
          },
          complete: function() {
            $this.text(commaSeparateNumber(this.countNum));
            //alert('finished');
          }
        }
      );

    });

    function commaSeparateNumber(val) {
      while (/(\d+)(\d{3})/.test(val.toString())) {
        val = val.toString().replace(/(\d+)(\d{3})/, '$1' + ',' + '$2');
      }
      return val;
    }

  }
  });

[Arne Drews]

Sieht umständlich aus. Mag aber daran liegen, dass ich jQuery für so manches für unnötig halte.
Mit nativen JS wäre hier eine Möglichkeit: https://www.javascripttutorial.net/d...-the-viewport/

[Driver08]

(Nachtrag*)

Hallo,
ja, das mag bestimmt simpler gehen. Ich hätte nichts dagegen.
Meist habe ich ein "scroll-Script" gefunden. Nicht aber das, wonach ich eigentlich gesucht habe.
Danke für den Link!

Die Funktion "isInViewport(el) prüft, ob sich das Element bzw. die Box tatsächlich im Fenster befindet.
Und diese Funktion muss jetzt um das Script gelegt werden, welches daraufhin ausgelöst werden soll. Richtig?

Geht das eventuell mit einer if-else Anwendung? In diesem Beispiels switcht der Text. Nun ja, es scheint leider noch nicht zu klappen :/ ich habe es auch mal mit "const messageText = isInViewport('counter') ? (und danach mein Script) probiert. Aber das löste nicht aus.

* habe es immerhin soweit hinbekommen, dass das Script tatsächlich am bestimmten Punkt angeworfen wird. Allerdings wird es immer gestartet, sobald gescrollt wird. Das scheint auch ganz schön Leistung zu beanspruchen

function isInViewport(el) {
  const rect = el.getBoundingClientRect();
  return (
      rect.top >= 0 &&
      rect.left >= 0 &&
      rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
      rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
}
const counter = document.querySelector('.counter-javascript');
document.addEventListener('scroll', function () {
    const messageText = isInViewport(counter);

//Start Counter-Script

document.getElementById("counterbox").onscroll = function() {counter()};
$('.counter').each(function counter() {
    var $this = $(this),
      countTo = $this.attr('data-count');

    $({
      countNum: $this.text()
    }).animate({
        countNum: countTo
      },

      {
        duration: 5000,
        easing: 'linear',
        step: function() {
          $this.text(commaSeparateNumber(Math.floor(this.countNum)));
        },
        complete: function() {
          $this.text(commaSeparateNumber(this.countNum));
          //alert('finished');
        }
      }
    );

  });

  function commaSeparateNumber(val) {
    while (/(\d+)(\d{3})/.test(val.toString())) {
      val = val.toString().replace(/(\d+)(\d{3})/, '$1' + ',' + '$2');
    }
    return val;
  }

// Ende vom Counter-Script

}, {
  passive: true
});

[basti1012]

Das scheint beinahe zu funktionieren. Leider wird das Script immer aktiviert, sobald gescrollt wird.

Es geht dir doch da drum das der Counter nur einmal läuft und nicht wieder startet, wenn man scrollt?
Dann benutze sowas wie eine Helfer Variable.
Ich meine das so

Javascript einmalig an bestimmter Position starten

wenn du Box1 hoverst fängt er immer wieder von vorne an.
Box2 zählt immer weiter und beachtet das hovern nicht mehr.