这是我第一次使用skrollr，所以在过去的几个小时里，我试了很多东西，以便更好地理解它。
计划是拥有一个建筑物的3D图像，当我滚动时，建筑物将旋转360度。我目前正在使用汽车作为示例，并且它在一个大的背景图像中，我根据我的位置更改背景的位置。这是我的一段代码片段：
<div data-0="" data-900="" class="skrollable skrollable-before ">
<div id="wrap">
<div class="car" data-0="dispay:block;" data-50="display:none;background-position:!0 0px;"></div>
<div class="car" data-0="display:none;" data-50="display:block;background-position:!0 -500px;" data-100="display:none;"></div>
<div class="car" data-0="display:none;" data-100="display:block;background-position:!0 -1000px;" data-150="display:none;"></div>
<div class="car" data-0="display:none;" data-150="display:block;background-position:!0 -1500px;" data-200="display:none;"></div>
<div class="car" data-0="display:none;" data-200="display:block;background-position:!0 -2000px;" data-250="display:none;"></div>
<div class="car" data-0="display:none;" data-250="display:block;background-position:!0 -2500px;" data-300="display:none;"></div>
</div>
</div>
这个功能已经正常工作了！
但是，这将会在一个长页面中被填充其他内容。我想做的是，在旋转时将建筑物固定在页面上。我尝试使用position:fixed，但我的所有其他内容都被拉动了，看起来有点奇怪。
我错过了什么吗？这应该如何完成？
我见过其他网站实现此功能的示例，我已经尝试检查代码以了解如何实现它，但我似乎找不到它。
任何帮助都将不胜感激！
编辑 ** 最终我得到的结果是：
<div class="wrap"
data-0="margin-top: -250px;"
data-_foobar--50="opacity: 0;"
data-_foobar-0="opacity: 1; display: block;"
<div class="building"
data-_foobar-50="background-position:!0 0px;"
data-_foobar-100="background-position:!0 -500px;"
data-_foobar-150="background-position:!0 -1000px;"
data-_foobar-200="background-position:!0 -1500px;"
data-_foobar-250="background-position:!0 -2000px;"
data-_foobar-300="background-position:!0 -2500px;"
>
</div>
</div>
我将“wrap”的位置固定，并设置为隐藏，一旦它在视口内使用常量，则显示。
var viewportHeight = $(window).height();
var constantsData = Math.floor(viewportHeight * 1);
var s = skrollr.init({
constants: {
foobar: constantsData
}
});