Как постепенно уменьшать элемент при скролле?

Question

[Александр Тимофеев]

т.е. чтобы он не уменьшался при достижении определённого уровня, а на протяжении всего движения до этого уровня постепенно уменьшался.

Answer 1

[Сергей delphinpro]

посчитали высоту страницы (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';
});

И демо на фиддле

Answer 2

[Игорь Петров]

Можно взять высоту всей страницы, посчитать проценты от нее, соотнести со скроллом, а там уже и решать.

Можно сразу эти проценты в css кидать, например, если это скроллбар.

Comments

[suvo0]

Высота страницы разная в разных размерах экрана.

[Ksider]

suvo0: ну так в проценты переводить надо

[suvo0]

Ksider: какие еще проценты, если элементы в vh, например. Или еще хуже - часть в px. Что отслеживать собираетесь?

[Ksider]

suvo0: все от задачи, берем высоту страницы и делим на сто, получаем один процент, и пляшем от этого

[Alex Mirgorodskiy]

Не знаю то не то, но на днях делал похожую штуку

$(window).scroll(function() {


if ($(this).scrollTop() > 50){
$('#main_bg').addClass("scroll");
$('.scene').fadeOut(2000);
}
if ($(this).scrollTop() < 300) {
$('#nav').fadeOut(150);
$('#main_bg').removeClass("scroll");
$('.hero_head').removeClass("head_scroll");

}
});

в css, ну это less

img#main_bg {
margin-left: -85%;
.center_block_width(center,250%);
.transition(all, 5s, 0.1s, ease);
}

.scroll {
margin: 0 !important;
width: 100% !important;
}

[Сергей delphinpro]

Высота страницы разная в разных размерах экрана.

Интересно , что это меняет? =))

[Игорь Петров]

suvo0: и ничто не мешает вам при этом с ней работать.