Получить процент прокрутки элемента jquery

Я не могу понять, как вычислить это значение

Прокручивая страницу вниз, я хотел бы создать функцию, которая возвращает процент «прокрутки».

Таким образом, мой 0 будет, когда элемент находится на пороге отображения (он находится внизу окна, показано 0 пикселей), а 100 - когда элемент полностью передан (элемент находится над верхней частью окна, 0 пикселей показано).

Мне нужно было бы сделать парралакс с пользовательской анимацией, чтобы сделать анимацию, которая начинается, когда элемент отображается, и анимируется до тех пор, пока элемент не исчезнет.

РЕДАКТИРОВАТЬ: Все плагины Paralax, которые я вижу, заставляют вас использовать готовые анимации. Я хотел бы анимировать свою собственную вещь, поэтому мне нужно это процентное значение.


javascript html jquery css parallax
person Fredy31    schedule 12.03.2018    source источник
comment
Возможно, дубликат stackoverflow.com/questions/19614069/   -  person fashuai    schedule 12.03.2018
comment
Пытался использовать эти функции, и это дает мне общий процент прохождения страницы. Например, 0 — это верх, 100% — это низ страницы.   -  person Fredy31    schedule 12.03.2018

Ответы (2)


arrow_upward
0
arrow_downward

Я никогда не использовал jquery. Но я могу помочь вам с этой функцией.

function ScrollPercent(selector) {
    var currY = document.documentElement.scrollTop;
    var elH = document.querySelector(selector).offsetHeight;
    var elTop = document.querySelector(selector).offsetTop;
    var fullH = document.documentElement.scrollHeight;
    var zero = elTop - elH;
    var hundred = elTop + window.innerHeight;
    var scrollPercent = (currY - zero) / (hundred - zero);
    return scrollPercent;
}
person Migats21    schedule 12.03.2018

arrow_upward
1
arrow_downward

Задав вопрос, я не просто сидел, сложа руки, а продолжил работу над этим. Кажется, это делает то, что я хочу сделать.

function ScrollPercent(jQEl){
    var currY = $('html').scrollTop();
    var elH = $(jQEl).height();
    var elTop = $(jQEl).offset();
    elTop = elTop.top;
    var fullH = $('html').height();
    var zero = elTop-elH;
    var hundred = elTop+$( window ).height();
    var scrollPercent = (currY-zero)/(hundred-zero);
    return scrollPercent;
}
person Fredy31    schedule 12.03.2018