无论屏幕大小如何,我希望页面的某些部分至少填充 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
值,因此 Skrollr 似乎不认为它具有任何高度,因此在我滚动时会立即发生视差“过渡”。没有上面的调整大小脚本,它工作得很好。
遗憾的是,我无法为您设置 Skrollr 的示例,但我通过在我的 CSS 中为我的部分提供X px 的高度值确认这就是发生的情况,然后 Skrollr 在滚动第一个X px 时正常运行。
因此,我的问题如下:
如何让 Skrollrheight
通过上面的脚本识别集合?
或者,
有没有更好/更简单的方法来创建我想要的效果?是通过另一个滚动动画库还是使用不同的方法来填充视口高度?