Trigger function only once on scroll

Question

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

what about a variable as a flag, that is setted to true inside start(), then inside the scroll() you check if this flag is false before run start()? — Calvin Nunes
– Calvin Nunes, Commented Sep 16, 2019 at 17:19

Bhojendra Rauniyar · Accepted Answer · 2019-09-16 17:24:34Z

6

You can setup a flag like:

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

answered Sep 16, 2019 at 17:24

Bhojendra Rauniyar

86k36 gold badges179 silver badges241 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

satish mallick · Accepted Answer · 2024-01-09 08:06:21Z

1

Demo

  $(document).ready(function() {
    
    var started = 0;
function start() {
  if(started==0) {
    alert("Alert only once");
  }
  started = 1;
}
  
    $(window).scroll(function() {
      if ( $(window).scrollTop() >= $('.box').offset().top - ($(window).height() / 2)) {
        $(".box").addClass("green");
        start();
      } else {
        $(".box").removeClass("green");
      }
    });
  });

*{margin:0;}
.box { background: red; height: 200px; width: 100%; margin: 800px 0 800px 0; }
.green { background: green; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<br />

<center>
    
  <br />
  <h1>scroll down</h1>
  </center>

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

edited Jan 9, 2024 at 8:06

answered Sep 19, 2019 at 5:21

satish mallick

8047 silver badges10 bronze badges

Comments

silencedogood · Accepted Answer · 2019-09-16 17:18:38Z

0

There's a bunch of ways to go about this. You could just remove the event listener (since you're using jQuery, I'll use the on and off methods):

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

answered Sep 16, 2019 at 17:18

silencedogood

3,3291 gold badge16 silver badges38 bronze badges

Comments

Chetan Prakash · Accepted Answer · 2019-09-16 17:44:23Z

0

if you want window scroll method to stop once the start method meet its requirement.. you can do it this way

  $(document).ready(function() {

  var toggleScroll = false;

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

    $(window).one("scroll", checkToggleScroll);

    function checkToggleScroll(){

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

        if(!toggleScroll){
          $(window).one("scroll", checkToggleScroll);
        }
    }

  });

answered Sep 16, 2019 at 17:44

Chetan Prakash

714 bronze badges

Comments

user2314737 · Accepted Answer · 2023-06-23 16:51:06Z

Just run the start() function when the $(".box) doesn't have the class "green" (that is added after a certain amount of scroll).

$(document).ready(function() {

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

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

.box {
  background: red;
  height: 200px;
  width: 100%;
  margin: 800px 0 800px 0;
}

.green {
  background: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box"></div>

Collectives™ on Stack Overflow

Trigger function only once on scroll

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related