4

我正在尝试计算一个百分比数（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： 在此处输入图像描述

4

1 回答 1

5

有很多方法可以给猫剥皮，但我个人会尝试确定进入和退出窗口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/

希望它是你正在寻找的。

于 2013-02-14T00:07:06.297 回答