Smooth scrolling using css translate 3D

Question

We're building a smooth scrolling library using minimal js and css translate 3d properties. We have a foundation for this (as attached pen), however as we increase the number of images and text content, the animation starts to jitter and sometimes even jump as we scroll. We're not sure whether we're using the optimal approach to achieve this. Please check out the attached pen.

Link to pen

    $(function () {

    $('.wrapper').height($('.smooth').height());

    var scrollTimer = null;

    $(window).scroll(function () {
        if (scrollTimer) {
            clearTimeout(scrollTimer);
        }
        scrollTimer = setTimeout(requestAnimationFrameTog, 5)
    });

    $(window).resize(function () {
        $('.wrapper').height($('.smooth').height());
    });

});

function requestAnimationFrameTog() {
    scrollTimer = null;
    window.requestAnimationFrame(scrollerize);
}

function scrollerize() {
    var scroll = window.pageYOffset;
    $(".smooth").css({
        transform: 'translate3d(0px, -' + scroll + 'px, 0px)'
    });
}

Thanks :)