jQuery addClass example

Change class name on click in jQuery

by uosahmed

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-animateNumber/0.0.14/jquery.animateNumber.js"></script>
<div class="row">
<h2>
Scroll to Element to run "Counter Function" when view comes
</h2>
</div>
<div class="go-counterTeaser">
    <div class="teaserBlock">
        <div class="numberBlock">
            <h2>2488561000</h2>
        </div>
        <div class="headingBlock">
            <h3>ERLĂ–SE AUS AUKTIONEN</h3>
        </div>
    </div>
</div>
<div class="row"></div>

CSS

*{
  margin:0;
  padding:0;
}
.row{
  width:100%;
  height:500px;
  background:lightyellow;
  font-family: sans-serif;
  padding : 20px 20px;
}

.teaserBlock {
    text-align: center;
    background: grey;
    color: #fff;
    padding: 10px 0px;
}
.numberBlock h2 {
    font-size: 38px;
    padding-top: 20px;
}

JavaScript

var counterTeaserL = $('.go-counterTeaser');
var winHeight = $(window).height();
if (counterTeaserL.length) {
    var firEvent = false,
        objectPosTop = $('.go-counterTeaser').offset().top;
        
        //when element shows at bottom
        var elementViewInBottom = objectPosTop - winHeight;
    $(window).on('scroll', function() {
        var currentPosition = $(document).scrollTop();
        //when element position starting in viewport
      if (currentPosition > elementViewInBottom && firEvent === false) {
        firEvent = true;
        animationCounter();
      }   
    });
}

//counter function will animate by using external js also add seprator "."
 function animationCounter(){
        $('.numberBlock h2').each(function () {
            var comma_separator_number_step = 			$.animateNumber.numberStepFactories.separator('.');
            var counterValv = $(this).text();
            $(this).animateNumber(
                {
                  number: counterValv,
                  numberStep: comma_separator_number_step
                }
            );
        });
    }