Question

我似乎无法弄清楚如何计算这个值

在向下滚动页面时，我想创建一个返回'滚动'的感知的函数。

所以我的0将是元素处于被显示的尖端（它位于窗口的底部，显示0个像素），100是元素完全通过时（元素位于窗口的顶部），0像素显示。）

我需要用自定义动画进行parralax，制作一个在元素显示时开始的动画，然后动画直到元素消失。

编辑：我看到的所有Paralax插件似乎都强迫你使用预制动画。我想动画我自己的东西，这就是为什么我需要这个百分比价值。

Answer 1

在提出问题后，我并没有坐在我的手上继续努力。这似乎是我想做的事。

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;
}

Answer 2

我从未使用过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;
}

获取百分比滚动元素jquery

2 个答案: