title: How to trigger function when specific element is in view, and also it must be triggered only once
body: <p>i am trying to make a counter on website, that is locacted in bottom of web page when i used </p>
  
  <pre><code>$(document).on('scroll',function(){
   if ($(window).scrollTop()&gt;1200){
  $('.counting').each(function() {
          $(this).prop('Counter', 0).animate({
                  Counter: $(this).text()
              }, {
                  duration: 2000,
                  easing: 'swing',
                  step: function(now) {
                  $(this).text(Math.ceil(now));
              }
          })
      })
  }
  })
  </code></pre>
  
  <p>but it causes triggering code on every scroll after scroll value exceeds 1200</p>