How to trigger this progress bar?

Question

I started studying Javascript and jQuery now, and looking for how to make a vertical progress bar found the function below:

It worked perfectly as I wanted, but I would like to know how I can get the bars to be triggered (start loading) only when I scroll and get to the position where they are, which is right at the bottom of the page. If anyone can help me, I’d really appreciate it!!!

$(function(){
  $("#bars li .bar").each(function(key, bar){
    var percentage = $(this).data('percentage');
  $(this).animate({
    'height':percentage+'%'}, 2000);
  })
})

#chart #bars {
  	display: inline-block;
  	padding: 0;
  	margin: 0;
  	padding-left: 45px;
  	text-align: center;}

#chart #bars li {
  	display: table-cell;
  	width: 100px;
  	height: 300px;
  	margin: 0;
   	color: gray;
  	text-align: center;
  	position: relative;}

#chart #bars li .bar {
  display: block;
  width: 70px;
  margin-left: 25px;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  position: absolute;  
  bottom: 0;}

.barra1{background: linear-gradient(#ffe1e6, #ff7b90);}
.barra2{background: linear-gradient(#aef0ee, #22bcb8);}
.barra3{background: linear-gradient(#fffcae, #fff962);}
.barra4{background: linear-gradient(#e1ffbe, #c4e59c);}
.barra5{background: linear-gradient(#e0c6ff, #bd9ce5);}

#chart #bars li span {
	position: absolute;
	bottom: -3em;
	left: 20px;
	line-height: 14px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
   <div id="chart" style="float: left;">
					      <ul id="bars">
				        <li><div data-percentage="80" class="bar barra1"></div><span>1</span></li>
				        <li><div data-percentage="85" class="bar barra2"></div><span>2</span></li>
				        <li><div data-percentage="90" class="bar barra3"></div><span>3</span></li>
				        <li><div data-percentage="75" class="bar barra4"></div><span>4</span></li>
				        <li><div data-percentage="70" class="bar barra5"></div><span>5</span></li>
				      </ul>
				    </div>

Answer 1

You can use this code, which will make the animation start when the div #chart appear at least half on the screen:

$(function(){
    $(window).scroll(function(){
        var el = $("#chart");
        var elTopo = el.offset().top;
        var elHeight = el.outerHeight();
        var scrlTopo = $(window).scrollTop();
        var altJanela = window.innerHeight; 
        var distance = elTopo-scrlTopo;
        if(distance <= altJanela-(elHeight/2)){
            $("#bars li .bar").each(function(key, bar){
                var percentage = $(this).data('percentage');
                $(this).animate({
                    'height':percentage+'%'
                }, 2000);
            });
        }
    });
})

#chart #bars {
  	display: inline-block;
  	padding: 0;
  	margin: 0;
  	padding-left: 45px;
  	text-align: center;}

#chart #bars li {
  	display: table-cell;
  	width: 100px;
  	height: 300px;
  	margin: 0;
   	color: gray;
  	text-align: center;
  	position: relative;}

#chart #bars li .bar {
  display: block;
  width: 70px;
  margin-left: 25px;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  position: absolute;  
  bottom: 0;}

.barra1{background: linear-gradient(#ffe1e6, #ff7b90);}
.barra2{background: linear-gradient(#aef0ee, #22bcb8);}
.barra3{background: linear-gradient(#fffcae, #fff962);}
.barra4{background: linear-gradient(#e1ffbe, #c4e59c);}
.barra5{background: linear-gradient(#e0c6ff, #bd9ce5);}

#chart #bars li span {
	position: absolute;
	bottom: -3em;
	left: 20px;
	line-height: 14px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Role pra baixo
<br><br><br><br><br><br><br><br><br><br><br>
   <div id="chart" style="float: left;">
					      <ul id="bars">
				        <li><div data-percentage="80" class="bar barra1"></div><span>1</span></li>
				        <li><div data-percentage="85" class="bar barra2"></div><span>2</span></li>
				        <li><div data-percentage="90" class="bar barra3"></div><span>3</span></li>
				        <li><div data-percentage="75" class="bar barra4"></div><span>4</span></li>
				        <li><div data-percentage="70" class="bar barra5"></div><span>5</span></li>
				      </ul>
				    </div>