When scrollTop equals something, start a function, but only once

Question

When dif<=400 the function starts, but when I keep scrolling the function continues and begins the cycle. I want the function to run only one time, but not every time we scroll.

The code:

$(window).scroll(function(){

 var scrl_height=$(window).scrollTop();
 var d_height=$(document).height();
 var dif=d_height - scrl_height;


 if(dif <= 400){

  $('.myStat2').circliful(1500).stop();

  $('#n75').animateNumber({ number: 75 },1500);
  $('#n100').animateNumber({ number: 100 },1500);
  $('#n57').animateNumber({ number: 57 },1500);
  $('#n87').animateNumber({ number: 87 },1500);
   
  }

})

.skll
{
 display: inline-block;
 height: 40px;
 width: 55px;
 margin-left: 10px;
}

#wd1{margin-left: -40px;}

.myStat2
{
 margin-left: 50px;
 margin-top: -114px;
}

<script type="text/javascript" src="js/jquery.circliful.min.js"></script>
<script type="text/javascript" src="js/jquery.animatenumber.min.js"></script>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor pellentesque odio in suscipit. Fusce posuere sapien neque, at tincidunt nisl ultrices id. Ut semper neque dui. Nunc volutpat diam vel risus tristique, at euismod ex dictum. Phasellus efficitur lectus nec felis venenatis dignissim. Vivamus sit amet ligula orci. Nulla tempus porttitor lectus, vel mattis ipsum vehicula rutrum. Nullam blandit venenatis nisl, in vulputate diam tincidunt vel. Sed aliquam tortor in dapibus aliquet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean convallis enim vel mollis sollicitudin. Integer lectus metus, facilisis vitae tempor a, ornare sed felis. Donec fringilla nibh vel nulla tempus tempor faucibus id turpis.

Fusce maximus lobortis urna in feugiat. Praesent dui enim, mattis ac felis ac, tristique laoreet mi. Nam ac nisi et lectus lobortis lobortis. Pellentesque vel metus cursus, scelerisque orci at, malesuada mauris. Proin scelerisque molestie lacinia. Nunc sodales commodo purus, non imperdiet magna volutpat quis. Morbi nec sodales felis. Curabitur luctus sapien ante, a ullamcorper neque volutpat non. Quisque vestibulum ornare tellus quis elementum. Nam risus sem, dignissim quis bibendum at, condimentum sit amet nibh. Vivamus sodales ultricies purus, ac luctus ex molestie non. Sed pretium condimentum felis vel ullamcorper.

Proin fringilla elementum mollis. Morbi ornare mauris tortor, non fringilla augue gravida sit amet. Aliquam commodo consequat viverra. Pellentesque at accumsan metus. Ut consectetur ante sit amet pharetra consequat. Vivamus porta quam a magna imperdiet lobortis. Donec porta gravida erat nec accumsan. Duis euismod lorem dolor, quis mollis risus rutrum quis. Duis finibus convallis risus. Nullam placerat eu felis vitae euismod. Pellentesque quis sapien tellus. Nulla aliquam consequat pretium. Mauris viverra lacus ut urna pretium aliquet. Quisque non velit dolor.

Cras id maximus sapien. Nulla egestas dignissim nulla vel cursus. Aliquam imperdiet odio dolor. Suspendisse dictum est sit amet sem gravida ultricies. Nunc in tortor nunc. Sed sodales vehicula commodo. Vivamus consequat mi mi, nec interdum ipsum cursus a. Fusce venenatis semper vulputate. Phasellus euismod fringilla efficitur. Cras feugiat nunc convallis lacus ultrices, ut accumsan purus porttitor. Nullam est purus, hendrerit nec tortor in, faucibus bibendum turpis. Cras id massa a tellus varius auctor.

Pellentesque at posuere urna. Praesent nec urna sit amet elit pretium consectetur ac id lorem. Sed faucibus eros sed justo maximus lobortis. Integer eget mauris elit. Nullam volutpat libero sit amet elit feugiat, a suscipit enim auctor. Nulla aliquam orci sed ullamcorper condimentum. Curabitur tempor turpis ut urna posuere blandit. Morbi id libero vel enim facilisis gravida. Sed euismod venenatis lacus in ullamcorper. Nunc in finibus est, nec pulvinar purus. Morbi tristique dolor vitae ligula tincidunt, sit amet fringilla purus blandit. Proin accumsan neque ut lectus congue suscipit. Vivamus odio ipsum, porttitor ac ex id, consequat egestas augue.

 <ul class="sec">
   <li class="skll" id="wd1">
     <div class="numb" id="n75">0</div>
     <div class="myStat2" data-dimension="150" data-width="10" data-percent="75" data-fgcolor="#A8D164" data-bgcolor="#343434"></div>
   </li>

   <li class="skll">
     <div class="numb" id="n100">0</div>
     <div class="myStat2" data-dimension="150" data-width="10" data-percent="100" data-fgcolor="#FBCF61" data-bgcolor="#343434"></div>
   </li>

   <li class="skll">
     <div class="numb" id="n57">0</div>
     <div class="myStat2" data-dimension="150" data-width="10" data-percent="57" data-fgcolor="#FF6F6F" data-bgcolor="#343434"></div>
   </li>

   <li class="skll">
     <div class="numb" id="n87">0</div>
     <div class="myStat2" data-dimension="150" data-width="10" data-percent="87" data-fgcolor="#A8D164" data-bgcolor="#343434"></div>
   </li>
 </ul>

Answer 1

Other option is to unbind the event. Bonus with this is, there is no checking on every scroll event.

$(window).on("scroll.past400", function(){

    var scrl_height=$(window).scrollTop();
    var d_height=$(document).height();
    var dif=d_height - scrl_height;


    if(dif <= 400){
      //...
      $(window).off("scroll.past400");
    }

});

Answer 2

You need to define a variable outside of the scope of the scroll function, and use it as a flag to check whether to fire the custom logic, e.g:

var checkScroll=true; /* <-- set the flag to check here */

$(window).scroll(function(){

 var scrl_height=$(window).scrollTop(),
    d_height=$(document).height(),
    dif=d_height - scrl_height;


 if(dif <= 400 && checkScroll){ /* <-- only run if the flag is true */
    $('.myStat2').circliful(1500).stop();
    $('#n75').animateNumber({ number: 75 },1500);
    $('#n100').animateNumber({ number: 100 },1500);
    $('#n57').animateNumber({ number: 57 },1500);
    $('#n87').animateNumber({ number: 87 },1500);
    checkScroll=false; /* <-- set the flag to false the first time, to prevent a second iteration */
  }

})