具有视差滚动的完整视口高度图像

Question

我希望页面的某些部分能够填充至少 100% 的视口高度，无论屏幕大小如何。我还希望部分的内容和背景以视差效果滚动。

我在页面上有 jQuery，并使用以下内容将部分 .parallax 调整为完整视口高度：

var imageFit = function() {
  windowHeight = $(window).height();
  $('.parallax').css('min-height', windowHeight);
};

$(document).ready(imageFit);
$(window).resize(imageFit);

我知道vh 和vw 单位，但由于浏览器支持不佳，我不想使用它们。 （顺便说一句，我的 JavaScript 真的很差，所以如果可能的话，请帮我改进）。

---

这是一支 100% 视口高度部分的钢笔：http://codepen.io/Mest/full/GpycL （如果不熟悉 Codepen；请单击左下角的编辑以编辑代码）。

这很好用，但是我不知道如何实现视差效果。我尝试使用 Skrollr 修改 CSS 属性以创建视差效果。然而，由于我的section 从上面的脚本中获得了它的完整视口高度height-value，所以 Skrollr 似乎不认为它有任何高度，因此在我滚动时会立即发生视差“过渡”。如果没有上面的调整大小脚本，它也能很好地工作。

遗憾的是，我无法为您设置 Skrollr 的示例，但我通过在我的 CSS 中为我​​的部分提供 X px 的高度值确认这就是发生的情况，然后 Skrollr 起到它应该在滚动第一个 X px 时。

因此，我的问题如下：

如何让 Skrollr 识别上面脚本设置的height？

或者，

有没有更好/更简单的方法来创建我想要的效果？是通过另一个滚动动画库还是使用不同的方法来填充视口高度？

Answer 1

不要忘记在imageFit 末尾拨打refresh()。

如果你也包含https://gist.github.com/Prinzhorn/5796546，它会很简单

var imageFit = function() {
   windowHeight = $(window).height();
   $('.parallax').css('min-height', windowHeight).refresh();
};