Как постепенно уменьшать элемент при скролле?
посчитали высоту страницы (hp), высоту окна (hw)
получили максимальный скролл smax = hp - hw и минимальный smin = 0
знаем начальный (hmax) и конечный (hmin) размеры целевого элемента
получаем текущую величину скролла (s)
вычисляем диапазоны измененийds = smax - smin = smax
dh = hmax - hmin
отсюда вытекает чтоs / ds = h / dh , где h - приращение высоты целевого элемента
=>h = hmax - (dh * s) / ds
Если нужно увеличивать элемент, меняем последнюю формулуh = (dh * s) / ds + hminИтоговый код (подробный)var element = document.getElementById('d');
var hp   = document.body.scrollHeight,
    hw   = window.innerHeight,
    smax = hp - hw,
    smin = 0,
    hmin = 100,
    hmax = 300,
    ds   = smax - smin,
    dh   = hmax - hmin;

window.addEventListener('scroll', function () {
    var s = window.pageYOffset; // current scrollTop
    var h = hmax - (dh * s) / ds;

    element.style.height = h + 'px';
});Сокращенныйvar element = document.getElementById('d');
var hmin = 100, 
    hmax = 300;

window.addEventListener('scroll', function () {
    var s = window.pageYOffset; // current scrollTop
    var h = hmax - ((hmax - hmin) * s) / (document.body.scrollHeight - window.innerHeight);

    element.style.height = h + 'px';
});
И демо на фиддле
Можно взять высоту всей страницы, посчитать проценты от нее, соотнести со скроллом, а там уже и решать.
Можно сразу эти проценты в css кидать, например, если это скроллбар.