document.addEventListener("DOMContentLoaded", function () {

    let windowHeight = document.getElementById('windowHeight');
    let scrollVolume = document.getElementById('scrollVolume');
    let markerLine = document.getElementById('markerLine');
    let markerLinetext = document.getElementById('markerLinetext');

    //動かす要素を探す
    let fadeConts = document.querySelectorAll('.anime');
    //動かす要素の配列を作る
    let moveConts = [];


    //windowの高さ & リサイズされたら再取得
    let windowH = window.innerHeight;
    window.addEventListener('resize', function () {
        windowH = window.innerHeight;
        windowHeight.textContent = windowH;
    }, false);

    windowHeight.textContent = windowH;

    //動かす要素の位置情報を取得しておく
    for (let i = 0; i < fadeConts.length; i++) {
        let rect = fadeConts[i].getBoundingClientRect().top;
        moveConts.push(rect);
        fadeConts[i].textContent = rect;
    }

    // marker
    // 画面の下からXpxのライン

    let markerLineVolume = windowH - (windowH / 4);
    markerLinetext.textContent = markerLineVolume;

    markerLine.style.top = markerLineVolume + 'px';

    //画面スクロールしたときに呼び出される
    window.addEventListener('scroll', function () {

        //スクロール位置
        let scrollDepth = window.pageYOffset;
        scrollVolume.textContent = scrollDepth;

        //判定位置は、スクロール量に伴ってそのままずれる
        markerLine.style.top = markerLineVolume + scrollDepth + 'px';

        //判定位置
        let markerLineNum = markerLineVolume + scrollDepth;

        for (let i = 0; i < moveConts.length; i++) {
            if (markerLineNum > moveConts[i]) {
                fadeConts[i].classList.add("show");
                console.log(i + "が超えた");
                //console.log(moveConts[0]);
                //console.log(windowHeight);
                //console.log(moveConts[i]);
            } else {
                //fadeConts[i].classList.remove("show");
            }
        }


    }, { passive: true });



}, false);