Momentum effect for sticky/fixed elements

momentum-sticky.js

let element;
let scrollTop = 0;
let pinTop = 0;
let lastTime;
let options = {
    lag: 50,
    maxSpeed: 100,
    frameRate: 30
};

const updatePosition = time => {
    const { lag, maxSpeed, frameRate } = options;
    if (!lastTime) {
        lastTime = time;
    }
    let delta = time - lastTime;
    if (delta >= frameRate) {
        scrollTop = window.pageYOffset;
        var move = Math.round((scrollTop - pinTop) * delta / (lag + delta));
        var direction = move === 0 ? 0 : move / Math.abs(move);
        pinTop = pinTop + Math.min(Math.abs(move), maxSpeed) * direction;
        Object.assign(element.style, {
            transform: `translateY(${-move}px`,
            transition: 'transform 0.2s ease'
        });
        lastTime = time;
    }
    requestAnimationFrame(updatePosition);
};

const momentumSticky = (el, opts = {}) => {
    element = el;
    options = { ...options, ...opts };
    requestAnimationFrame(updatePosition);
};

export default momentumSticky;