<script>
    //jqery
    // $(window).scroll(function(){   
    // });
    //javascript
    // window.addEventListener("scroll",function(){});
    // window.addEventListener("scroll",()=>{});

    //jqery
    // const scrollTop = $(window).scrollTop();
    //javascript
    // const pageYOffset = window.pageYOffset;

    //jqery
    // $(".scrollTop").text(scrollTop); 
    //javascript
    // document.querySelector(".scrollTop").textContent = pageYOffset;

    window.addEventListener("scroll", () => {
        let pageYOffset = (window.pageYOffset || document.documentElement.scrollTop);
        let pageYOffset2 = (window.pageYOffset || document.documentElement.scrollTop) + screen.height;
        console.log("1:" + screen.height / 2);
        console.log("2:" + document.documentElement.scrollTop);
        console.log("3:" + window.pageYOffset);

        let infoPageYOffset = document.querySelector(".pageYOffset");
        infoPageYOffset.textContent = pageYOffset;
        // document.querySelector(".pageYOffset").textContent = pageYOffset;
        // document.querySelector(".pageYOffset").innerHTMLContent = pageYOffset;

        strongOffset.forEach(function (cont, index) {
            if (pageYOffset > document.querySelector("#section" + (index + 1)).offsetTop) {
                console.log("4:" + pageYOffset);
                cont.style.color = 'red';
                console.log("4:" + cont.style.color);
            } else{
                cont.style.color = 'black';
            }
        })
        
        let sectionOffset = document.querySelectorAll(".content-item");
        sectionOffset.forEach(function(element){
            if(pageYOffset2 > element.offsetTop){
                element.classList.add("show");
            }else{
                element.classList.remove("show");
            }
        })
        
    });

    let strongOffset = document.querySelectorAll(".info2 span strong");
    console.log(strongOffset);

    strongOffset.forEach(function (element, index) {
        element.textContent = document.querySelector("#section" + (index + 1)).offsetTop;
        // console.log(document.querySelector("#section"+(index+1)).offsetTop);
        // console.log(element);
        // console.log(index);
    })

</script>