.my-example
    .section
        .icon Black or green?
    .section
        .icon Black or green?
    .section
        .icon Black or green?
    .section
        .icon Black or green?

@import url('https://fonts.googleapis.com/css?family=Fredoka+One');

.my-example {
    & > .section {
        position: relative;
        height: 100vh;
        background: #FFFFFF;
        color: #1C1D23;
        overflow: hidden;
    }
    
    & > .section:nth-of-type(2n) {
        background: #1C1D23;
        color: #14FF6E;
    }
    
    & > .section > .icon {
        font-family: 'Fredoka One', cursive;
        font-size: 10vw;
        line-height: 100vh;
        text-align: center;
        will-change: transform;
        transition: transform 300ms ease;
    }
}

const icons = document.querySelectorAll('.icon');


window.addEventListener('scroll', debounce(updatePositions, 20));
window.addEventListener('resize', updatePositions);
updatePositions();
window.scrollTo(0, window.innerHeight / 2 - window.innerWidth / 50);


function updatePositions() {
    [].forEach.call(icons, (icon) => {
        icon.style.transform = `translateY(${window.pageYOffset - icon.parentNode.offsetTop}px)`;
    });
}

function debounce(func, ms) {
    let callAllowed = true;

    return (...args) => {
        if (!callAllowed) {
            return;
        }

        func.apply(this, args);

        callAllowed = false;

        setTimeout(() => {
            callAllowed = true;
        }, ms);
    };
}