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

Question

我正在尝试计算一个百分比数 (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);

但我没有考虑文档高度，所以我知道我错过了一些东西。我也觉得这可以用一个等式完成，没有 if/else

这是我正在处理的一个不起作用的小提琴：http : //jsfiddle.net/nxdTn/

---

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

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

蓝色的不透明度为 0：

在 100% 不透明度下：

然后回到 0：

Answer 1

有很多方法可以给猫剥皮，但就我个人而言，我会尝试确定进入和退出窗口scrollTop时的值的一些界限content，然后计算scrollTop相对于这些界限的位置。不需要中心点或文档的高度。

一个微小的变化，我不得不让你的CSS是删除从边缘content并将其添加为填充到body。保证金被content视为其position.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;

你可以在这里看到一个工作演示：http : //jsfiddle.net/GoranMottram/nxdTn/3/

希望这是你要找的。