Skrollr相对模式从屏幕外开始，提前结束

Question

每次我使用skrollr时，我似乎都遇到了这个问题，我不确定问题是什么。我只想要一个简单的过渡，从元素刚进入视图开始，到离开视图时结束。没有什么花哨。没有视口。不是绝对的。

我使用以下内容：

<section
  id="lets-talk"
  class="frontpage-section"
  data-bottom-top="background-position: 50% 200px;"
  data-top-bottom="background-position: 50% 0px;"
  data-anchor-target="#lets-talk">

上面的代码中肯定有问题。计算都发生在错误的地方。

（以下关于背景Y位置的所有0px-200px提及）

如果元素位于视图之外的屏幕底部，我希望行为为200px。当它在中心时，它应该是100px。当它完成屏幕顶部后，它应该是0px。

但它根本不起作用。当我滚动以使其位于屏幕底部时，它是94.5px，当它位于我的屏幕中心时停在0px。它在屏幕外动画，大约一半的页面最终达到200px（容器本身高度的两倍）。

这里没什么好看的，#lets-talk元素包含静态/相对元素，如普通页面，没有特定的高度位置或边距/位置偏移。

这是一个显示所需和实际动画区域之间差异的图形，以防我的解释没有帮助：

---

请参阅下面的屏幕截图，显示图像，它显然位于浏览器的中心。背景位置设置（右上角可见）为50% 1.821px，而不是50% 100px左右。

正如您所想，向下滚动几个像素可以在50% 0px处结束转换，元素仍然清晰地显示在屏幕上。在元素离开屏幕后，您必须向上滚动数百个像素，才能在50% 200px处开始动画。

网页上没有ID“let-talk”的其他元素。

Skrollr似乎处于某种偏移模式，或者被某些东西弄糊涂了。

附加信息：

CSS（主要是重置）：

background: url(images/app-development.jpg) 50% 0px no-repeat;
background-attachment: fixed;
color: #EFF1C2;
position: relative;
width: auto;
margin: 0 auto;
display: block;
text-align: left;

容器都是位置：relative，display：block，没有指定高度/边距/位置相关信息。该元素在页面下方可见近4500px。完整的网站大约是5800像素高。

有一个#skrollr-body元素包装整个页面，没有分配样式。

没有javascript干扰此部分或任何父部分。

Skrollr版本：skrollr 0.6.25（2014-05-24）

Answer 1

我通过为目标元素定义一个清晰的高度来解决这个问题。

示例：

.target-elm { min-height: 780px; }