Question

我刚刚开始使用Skrollr.js - 我能够制作我想要的动画，但是我需要使用position：fixed;我的元素将它们准确地定位在它们应该的位置。

问题是，如果您的屏幕不是特定大小，则动画会被截止或不居中。

有没有更好的方法来使用Skrollr定位元素或其他东西我可以做些什么来解决这个问题？

我有3个元素组合在一起制作一个徽标，所以它需要非常精确地结合在一起。

由于

Answer 1

只需将这3个元素放在div中，这样你只会定位div而不影响其中元素的位置......无论你如何定位容器，里面的元素都不会受到任何转换。

以下是一个例子：

JSFIDDLE

CSS：

#logo {
    width:200px;
    height:200px;
    position:fixed;
    top:20px;
    left:20px;
    background:red;
}
#elem1 {
    width:100px;
    height:100px;
    position:absolute;
    top:0;
    left:0;
    background:yellow;
}
#elem2 {
    width:100px;
    height:100px;
    position:absolute;
    top:0;
    right:0;
    background:blue;
}
#elem3 {
    width:200px;
    height:100px;
    position:absolute;
    bottom:0;
    background:green;
}

HTML：

<div id="logo">
    <div id="elem1"></div>
    <div id="elem2"></div>
    <div id="elem3"></div>
</div>

skrollr.js响应

1 个答案: