Smooth parallax scrolling

gistfile1.js

var geometry = {};

geometry.scrollTop = function(win, doc) {
    if (win.pageYOffset !== undefined) {
        return win.pageYOffset;
    } else {
        return Math.max(doc.documentElement.scrollTop, doc.body.scrollTop);
    }
};

// a little bit of parallax
var lastScrollY = 0,
    ticking = false,
    mainHeadBackground = document.querySelector('.main-head__background '),
    speedDivider = 2,
    requestTick = function() {
        if (!ticking) {
            window.requestAnimationFrame(updatePosition);
            ticking = true;
        }
    },
    updatePosition = function() {
        var translateValue = lastScrollY / speedDivider;

        // We don't want parallax to happen if scrollpos is below 0
        if (translateValue < 0) {
            translateValue = 0;
        }

        translateY3d(mainHeadBackground, translateValue);

        // Stop ticking
        ticking = false;
    },
    translateY3d = function(elm, value) {
        // Translates an element on the Y axis using translate3d
        // to ensure that the rendering is done by the GPU
        var translate = 'translate3d(0px,' + value + 'px, 0px)';
        elm.style['-webkit-transform'] = translate;
        elm.style['-moz-transform'] = translate;
        elm.style['-ms-transform'] = translate;
        elm.style['-o-transform'] = translate;
        elm.style.transform = translate;
    };
    
var doScroll = function() {
    lastScrollY = geometry.scrollTop(window, document);
    requestTick();
};
window.addEventListener('scroll', doScroll, false);