Activate Animation Bar when the content is into view

Question

I have read other topics like this and this, but is not my situation.

I have this CSS snippet:

.evaluation .background_bar .full_background_bar{
display: block;
height: 12px;
animation: loadbar 2s 200;
-webkit-animation: loadbar 2s 200 ease-out forwards;
}

@keyframes loadbar {

  from {
    width: 0;
  }

}
@-webkit-keyframes loadbar {

  from {
    width: 0;
  }

}

I want to activate this when page scrolls down to the evaluation block. In my case, I add the width with a dinamic div style="width:" code, so I can't add this (from the example that I linked):

<div class="level eighty">80%</div>

Because the width is not standard (it's a custom field specific for the post). I'm trying to solve this snippet:

<script>
function isElementInViewport(elem) {
    var $elem = $(elem);

    // Get the scroll position of the page.
    var scrollElem = ((navigator.userAgent.toLowerCase().indexOf('webkit') != -1) ? 'body' : 'html');
    var viewportTop = $(scrollElem).scrollTop();
    var viewportBottom = viewportTop + $(window).height();

    // Get the position of the element on the page.
    var elemTop = Math.round( $elem.offset().top );
    var elemBottom = elemTop + $elem.height();

    return ((elemTop < viewportBottom) && (elemBottom > viewportTop));
}

// Check if it's time to start the animation.
function checkAnimation() {
    var $elem = $('.full_background_bar');

    // If the animation has already been started
    if ($elem.hasClass('start')) return;

    if (isElementInViewport($elem)) {
        // Start the animation
        $elem.addClass('start');
    }
}

// Capture scroll events
$(window).scroll(function(){
    checkAnimation();
});

</script>

In CSS I add a start class with the settings of the animation (that I remove from full_background_bar), but doesn't work.

EDIT:

I solved the problem with the code and animation works in fiddle. But when I put all in my theme, doesn't work. The problem is the javascript: how I have to put the snippet? I tried in header and footer.

Thank you