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

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的值是什么的一些界限然后只计算{{1与这些界限相关的位置。没有中心点或文件的高度。

我必须对您的CSS进行的一项小改动是从scrollTop中移除边距并将其添加为content的填充。保证金正在处理body，好像它的content值为0。

position.top()

您可以在此处查看有效的演示：http://jsfiddle.net/GoranMottram/nxdTn/3/

希望这就是你要找的东西。