Jquery 计算视差不透明度的定位元素百分比

我试图计算一个百分比（0.0-2.0/0%-200%），这样我就可以在div进入和离开视图时改变它的不透明度

• 当窗口位于可视区域上方时，百分比等于或小于0
• 当窗口位于可视区域的精确中心时，百分比为1.0
• 当窗口位于可视区域下方时，百分比为2.0及以上

当在视图中滚动时，它将是其中的一部分

不知何故，我需要将窗口的垂直中心与区域的垂直中心进行比较，但我很难正确计算

到目前为止我有

var p = {
    scrollTop: $(window).scrollTop(),
    documentHeight: $(document).height(),
    windowHeight: $(window).height(),
    contentTop: $('.content').position().top,
    contentHeight: $('.content').height()
};

if (p.windowHeight / 2 + p.scrollTop < p.contentHeight / 2 + p.contentTop) {

    p.percent = (p.windowHeight / 2 + p.scrollTop) / (p.contentHeight / 2 + p.contentTop);
}
else if (p.windowHeight / 2 + p.scrollTop > p.contentHeight / 2 + p.contentTop) {

    p.percent =  (p.windowHeight / 2 + p.scrollTop) / (p.contentHeight / 2 + p.documentHeight - p.contentHeight - p.contentTop);
}
else p.percent = 1;

$('.content').animate({
    opacity: 1 - Math.abs(p.percent - 1)
}, 1);

var p={
scrollTop:$（窗口）.scrollTop（），
documentHeight:$（document）.height（），
windowHeight:$（窗口）.height（），
contentTop:$（'.content'）.position（）.top，
contentHeight:$（'.content'）.height（）
};
如果（p.windowHeight/2+p.scrollTopp.contentHeight/2+p.contentTop）{
p、 百分比=（p.windowHeight/2+p.scrollTop）/（p.contentHeight/2+p.documentHeight-p.contentHeight-p.contentTop）；
}
否则p.percent=1；
$（'.content'）。设置动画({
不透明度：1-Math.abs（p.percent-1）
}, 1);

但是我没有考虑文档的高度，所以我知道我遗漏了一些东西。我也觉得这可以在一个等式中完成，而不需要if/else

这是我正在处理的一把无法正常工作的小提琴：

---

为了更好地演示，请参见下面的示例

黄色是文档，透明灰色是窗口，蓝色是可视区域

蓝色的不透明度为0：

100%不透明度时：

然后返回到0：

---

给猫剥皮的方法有很多，但就我个人而言，我会尝试确定当

内容进入和退出窗口时，
滚动顶部
的值的一些界限，然后只计算
滚动顶部
相对于这些界限的位置。不需要中心点或文档高度

我对你的CSS做了一个小小的改变，那就是从
内容中删除边距，并将其作为填充添加到
正文中。边距将
内容处理为
位置。top（）
值为0

var p = {
    scrollTop: $(window).scrollTop(),
    windowHeight: $(window).height(),
    contentTop: $('.content').position().top,
    contentHeight: $('.content').height()
};

// determine scrollTop's bounds where content enters & exits the window
p.lowerBound = p.contentTop - p.windowHeight;
p.upperBound = p.contentTop + p.contentHeight;

// determine scrollTop's position percentage (x2) in relation to bounds
p.percent = (p.scrollTop - p.lowerBound) / (p.upperBound - p.lowerBound) * 2;

您可以在此处看到一个工作演示：

希望这就是你要找的