Skrollr:当改变margin-top时,div会上下调整

时间:2013-11-23 14:17:13

标签: margin skrollr

我有Skrollr的问题。当向下滚动时,我有一个div(灰色)从左到右改变它的位置。在div(黄色)内,还有另一个div。只要父div仍在改变它的位置,我希望它保持在同一高度。我尝试通过更改margin-top来做到这一点,就像这样:

<div id="grey" data-100="right:100%;" data-700="right:50%;">
<div id="yellow" data-100="margin-top:200px;" data-700="margin-top:800px;"</div></div>  

And that's what happens. 一切都会好的,但黄色的div在向右移动时上下恭维。有没有办法解决这个问题而不使用'position:fixed'?谢谢你的帮助!

编辑:顺便说一句,在iPad上它可以正常工作。

1 个答案:

答案 0 :(得分:1)

浏览器将黄色div向上移动(使用其他所有内容,因为它正在滚动)并稍后将margin-top动画再次向下移动。获得完美结果的唯一方法是fixed

但是你可以通过禁用黄色div的平滑滚动来使它稍微好一些。滚动速度非常快时,你仍会看到它跳跃。

<div id="yellow" data-smooth-scrolling="off" data-100="margin-top:200px;" data-700="margin-top:800px;"</div>

另外,我建议使用CSS转换而不是保证金。

<div id="yellow" data-smooth-scrolling="off" data-100="transform:translate(0, 200px);" data-700="transform:translate(0, 800px);"</div>