Check elem in viewport

// check element in viewport

document.addEventListener('scroll', function(el) {

    var stage1 = document.querySelector('.stage1');
    var stage2 = document.querySelector('.stage2');
    var stage3 = document.querySelector('.stage3');
    var stage4 = document.querySelector('.stage4');
    var stage5 = document.querySelector('.stage5');
    var stage6 = document.querySelector('.stage6');

  var stages = [stage1, stage2, stage3, stage4, stage5, stage6];

    function checkView() {

        var stageResult;

        for( var i=0; stages.length >= 5 ;i++ ) {

                stageResult = elementInViewport(stages[i]);

                if( stageResult === true ) {
                       stages[i].classList.add('sectionView');

                }
                else if(stageResult === false ) {
                        stages[i].classList.remove('sectionView');
                }
        }
    }
    // checkView();
});

var topC,leftC,widthC,heightC;
function elementInViewport(el) {
    topC = el.offsetTop ? el.offsetTop : 20;
    leftC = el.offsetLeft;
    widthC = el.offsetWidth;
    heightC = el.offsetHeight;
    while(el.offsetParent) {
        el = el.offsetParent;
        topC += el.offsetTop;
        leftC += el.offsetLeft;
    }
    return (
        topC < (window.pageYOffset + window.innerHeight) &&
        leftC < (window.pageXOffset + window.innerWidth) &&
        (topC + heightC) > window.pageYOffset &&
        (leftC + widthC) > window.pageXOffset
    );
}

//safari support

function checkView(elem) {
if (window.pageYOffset - elem.offsetTop < elem.offsetHeight/2 + 300) {
elem.classList.add('animate-scroll');
}
if (window.pageYOffset - elem.offsetTop < -elem.offsetHeight/2 - 300) {
elem.classList.remove('animate-scroll');
}
}