2013-04-17 117 views
0

我使用StickyPanelSmooth-ScrollScrolly,我需要固定的(内容移到它)背景的甚至“页”,以及视差背景(内容&背景分开移动)单数'页'。所以我的 '页' 去甚至甚至甚至。 '网页'是5个div,一个在另一个之下,并且每个div设置为浏览器窗口的高度&,以制作单页网站。视差背景不占满“页”区域

我遇到的问题是在具有视差背景的'页面'2 & 4中,背景被错误定位。通过检查元素,我发现由设置的背景位置滚动是如此遥远,背景图像甚至不显示。 Scrolly提供了两个属性与滚动背景在元素上设置:

<div data-velocity=".3" data-fit="1000"> 

这些允许设置视差元件的速度和分别设置相对背景位置。我发现,当我使用data-fit属性调整背景时,它永远不会出现在正确的位置,因为'页面'以及背景高度都与浏览器窗口有关。

我需要背景总是覆盖div,即如果背景图像是没有透明度的图像,那么div的背景颜色永远不会显示。

我认为可能会将背景设置为比浏览器窗口多10%左右,但我不知道该怎么做。

这是一个jsFiddle,虽然由于某些原因,背景图像不会显示在'页面'5上。我还将背景图像设置为占位符,并将div设置为随机背景颜色,发展。

这是一个很难解释的问题,所以我可能没有彻底表达我的观点。如果我想一个更好的方式来解释这个问题,我会更新我的帖子。

谢谢

回答

0

好吧,这是一个简单的,但终于搞清楚了。我使用JS获取页面高度的一半,获得页面高度的130%,然后设置背景图像CSS,当我意识到我可以将它设置为CSS ....因此,我设置了背景图像,大小到100%130%,然后它只是使用数据拟合属性完善它的一个例子。无论如何,它足够接近我的喜好。

background-size: 100% 130%; 

jsFiddle for those interested