Skrollr相对职位不起作用

Question

我需要能够将div从一个100％高度div移动到另一个100％高度div中的固定位置。我正在使用相对位置，因为我不知道div有多大。究竟我做错了什么，Skrollr文档让我感到困惑。这是我用来尝试解决问题的代码。

data-0="transform: translate(0,0vh);" data-center="transform: translate(0,100vh);

这是一个简化的测试用例： http://codepen.io/simonfricker/pen/KVmPaZ

HTML

<section class="block hero">
  <div class="container">
    <div class="happy" data-0="transform: translate(0,0vh);" data-top-top="transform: translate(0,10vh);"></div>
  </div>
</section>

<section class="block content">
  <div class="container">
    <p>Happy face should end up here on scroll</p>
  </div>
</section>

CSS

html, body{
  height:100% !important; 
}

.block{
height:100%;
}

.hero{
  background: red;
}

.content{
  background: yellow;
      text-align: center;
    padding-top: 10%;
}

.happy{
  font-size:250px;
  text-align: center;
}
p{
line-height:100%;
}

JS

var s = skrollr.init();