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

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。

这里是我正在使用的无效fiddle: http://jsfiddle.net/nxdTn/

---

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

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

蓝色将为0不透明度： 在100％不透明度时： 然后回到0：

- Steve Robbins

Answer 1

有很多种方法可以解决问题，但我个人会尝试确定当content进入和离开窗口时scrollTop的值的范围，然后仅计算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/ 希望这正是你想要的。

- Goran Mottram