jquery - skrollr 相对不能正常工作

Question

你好我想了解 sckrollr 但我似乎在相对使用上失败了，我想得到的是:

• 有 X 个盒子，里面有一些元素
• 当元素 anchor 到达视口(viewport) anchor 时做一些事情

我不明白我有上面的代码并且 skrollr 做第二个 .text 元素的动画，因为我开始滚动页面，他不应该只在元素 anchor 到达视口(viewport) anchor 时才制作动画吗？

我就是不明白

    <style>
      body{height:100% !important;} /*SOLUTION FOR THIS PROBLEM*/
      .paralaxelem2{width:100%;height:100%;background:50% 0 no-repeat fixed;background-size:100% 100%;}
      .text{margin:0 auto;width:500px;padding:150px 0 0 0;position:relative;}
      .text h1{padding:0px;margin:0px;text-transform:uppercase;color:#000;}
      .text p{background-color:#000;color:#fff;padding:15px;}
    </style>


<section class="paralaxelem2" style="background-image:url('/images/fundos/bg_dummy_2.jpg');">
  <div class="text" data-0-top-top="opacity:1;" data--300-top-top="opacity:0;">
    <h1>SOme Home page title goes arround</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, est, consectetur, officiis, soluta impedit eveniet esse iusto temporibus asperiores quasi quos mollitia voluptates rerum quae voluptatem amet quidem totam. Et!</p>
  </div>
</section>


<section class="paralaxelem2" style="background-image:url('/images/fundos/bg_dummy_1.jpg');">
  <div class="text" data-bottom-top="opacity:1;padding-top:150px;" data-bottom-bottom="opacity:1;padding-top:600px;">
    <h1>SOme Home page title goes arround</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, est, consectetur, officiis, soluta impedit eveniet esse iusto temporibus asperiores quasi quos mollitia voluptates rerum quae voluptatem amet quidem totam. Et!</p>
  </div>
</section>


<section class="paralaxelem2" style="background-image:url('/images/fundos/bg_dummy_3.jpg');">
  <div class="text">
    <h1>SOme Home page title goes arround</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, est, consectetur, officiis, soluta impedit eveniet esse iusto temporibus asperiores quasi quos mollitia voluptates rerum quae voluptatem amet quidem totam. Et!</p>
  </div>
</section>

Answer 1

引用 https://github.com/Prinzhorn/skrollr#relative-mode-or-viewport-mode

Important: All those values will be calculated up-front and transformed to absolute mode. So if either the element's box height changes (height, padding, border) or the elements position within the document, you probably need to call refresh() (see documentation in JavaScript section below). Window resizing is handled by skrollr.

在您的情况下，您正在为与 anchor 冲突的垂直填充设置动画。这是先有鸡还是先有蛋的问题。文档中提到的 refresh 对您没有帮助。您需要在关键帧中包含额外的填充作为偏移量。