获取滚动元素的百分比 jquery

Question

我似乎不知道如何计算这个值

在向下滚动页面时，我想制作一个 return 'scrolled through' 百分比的函数。

所以我的 0 是元素即将显示时（它位于 window 的底部，显示 0 个像素），100 是元素完全通过时（元素是window 上方显示 0 个像素）。

我需要它来使用自定义动画进行视差，制作一个在显示元素时开始的动画，并一直播放直到元素消失。

编辑：我看到的所有 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

Get percent scrolled through an element jquery

javascript

jquery

html

css

parallax