<script>
    infoScrollTop = $(".info strong");
        $(window).scroll(function () {
            const scrollTop = $(window).scrollTop();
            console.log(scrollTop);

            //info
            infoScrollTop.text(parseInt(scrollTop));

            const scrollTop2 = $(window).scrollTop() + $(window).height();

            //each함수 info2 text
            info2SectionOffsetTop = $(".info2 span strong");
            info2SectionOffsetTop.each(function (i) {
                sectionOffsetTop = $("#section" + (i + 1)).offset().top;
                $(this).text(parseInt(sectionOffsetTop));
            })

            //each함수 info2 css
            section = $(".content-item");
            info2SectionOffsetTop = $(".info2 span strong");
            section.each(function (i) {
                if(scrollTop > $(this).offset().top){
                    info2SectionOffsetTop.eq(i).css("color", "red");
                }else{
                    info2SectionOffsetTop.eq(i).css("color", "black");
                }
            })

            //each함수 section1~9 show클래스 
            //빨리 나오게 하려면 scrollTop값이 커지거나  section의 offsetTop값이 작아커야 함
            section = $(".content-item");
            section.each(function () {
                if (scrollTop2 > $(this).offset().top) {
                    $(this).addClass("show");
                }else{
                    $(this).removeClass("show");
                }
            })

            // for (i = 0; i < 9; i++) {
            //     sectionOffsetTop = $("#section" + (i + 1)).offset().top;
            //     info2SectionOffsetTop = $(".info2 span strong");
            //     // info2SectionOffsetTop.eq(i).text(parseInt(sectionOffsetTop));

            //     //for문 css
            //     if (scrollTop > parseInt(sectionOffsetTop)) {
            //         info2SectionOffsetTop.eq(i).css("color", "red");
            //     } else {
            //         info2SectionOffsetTop.eq(i).css("color", "black");
            //     }

            //     //for문 show클래스
            //     section = $("#section" + (i + 1))
            //     if (scrollTop2 > parseInt(sectionOffsetTop)) {
            //         section.addClass("show");
            //     } else {
            //         section.removeClass("show");
            //     }
            // }// for문
        })

        //each함수 info2 text
        info2SectionOffsetTop = $(".info2 span strong");
        info2SectionOffsetTop.each(function (i) {
            sectionOffsetTop = $("#section" + (i + 1)).offset().top;
            $(this).text(parseInt(sectionOffsetTop));
        })
        //for문 text
        // for (i = 0; i < 9; i++) {
        //     sectionOffsetTop = $("#section" + (i + 1)).offset().top;
        //     info2SectionOffsetTop = $(".info2 span strong");
        //     info2SectionOffsetTop.eq(i).text(parseInt(sectionOffsetTop));
        // }

</script>