2

我在尝试让一个元素在移动的 div 中设置动画时遇到问题；

想象一下，我有一个div（蓝色 800 宽 x 100 高）在屏幕下方，在屏幕下方，当您向下滚动时，它会进入屏幕并继续向上并从屏幕顶部消失。我称之为div“容器”。

现在想象一下，如果我div在“容器”内部有一个较小的div，称为“盒子”，我将动画应用到“盒子”，从左到右移动它。

我希望当我向下滚动时，框会在容器内从左向右移动，因为容器会在屏幕上向上移动。（导致盒子看起来像是在屏幕上沿对角线移动）

我得到的结果是容器如预期的那样在屏幕上向上移动，但是盒子现在在它的容器之外并且从右到左移动到屏幕底部

我无法弄清楚如何让盒子在它的父容器内移动并向上滚动。

我想我需要使用relative模式（或视口模式），但我根本无法让它工作。

间隔 div：

<div id="justaspacer" style="height:1000px;"></div>

（容器分区）：

<div id="container" style="width:800px; background:#D1E3ED; height:100px; margin:auto;></div>

（框格）：

<div id="box" style="background:#00F; width:100px; height:100px;" data-anchor-target="#container" data-100-bottom="left:100%; opacity:0;" data--100-bottom="left:50%;opacity:1;"  data-top="top:80%;">"</div>"

这导致容器向上滚动，并且从屏幕外飞入的框完全从容器中移除。

这就是所有代码，没有其他 css，只有

<script type="text/javascript" src="dist/skrollr.min.js"></script>

<!--[if lt IE 9]>
<script type="text/javascript" src="dist/skrollr.ie.min.js"></script>
<![endif]-->

<script type="text/javascript">
var s = skrollr.init({
    edgeStrategy: 'set',
    easing: {
        WTF: Math.random,
        inverted: function(p) {
            return 1-p;
        }
    }
});
</script>

这个 javascript

任何帮助将非常感激

一直让我发疯

希望有人可以帮助

4

1 回答 1

4

就像丹在评论中说的那样，您需要将容器相对定位和绝对定位。在尝试 skrollr 之前，您应该真正学习 CSS。

http://jsbin.com/aWOB/1/edit

<div id="container" style="width:800px; background:#D1E3ED; height:100px; margin:auto;position:relative;"></div>

<div id="box" style="background:#00F; width:100px; height:100px;position:absolute;" data-anchor-target="#container" data-bottom="left:100%;margin-left:-100px;" data-top="left:0%;margin-left:0px;"></div>
于 2013-08-25T13:02:47.723 回答