Search code examples
javascriptjqueryscrolltriggers

Trigger function only once on scroll

I want to start a function when a div is scrolled into the viewport. My problem is, that the function is triggered/started again every time I continue to scroll.

HTML:

<div class="box"></div>

JS:

 $(document).ready(function() {

    function start() {
        alert("hello");
    }

    $(window).scroll(function() {
      if ( $(window).scrollTop() >= $('.box').offset().top - ($(window).height() / 2)) {
        $(".box").addClass("green");
        start();
      } else {
        $(".box").removeClass("green");
      }
    });
  });

To sum up: the function "start" should be started, when the div is scrolled into the viewport. But it should be not triggered again, after it was triggered once.

Fiddle

Solution

  • You can setup a flag like:

    var started = false;
function start() {
  if(!started) {
    alert("hello");
  }
  started = true;
}