Jquery skrollr relative工作不正常

Jquery skrollr relative工作不正常,jquery,css,skrollr,Jquery,Css,Skrollr,你好,我试图理解sckrollr,但我似乎在相对使用方面失败了,我试图得到的是: 有X个盒子,里面有一些元素 当元素锚点到达视图端口锚点时,执行一些操作 我不明白我有上面的代码,skrollr做第二个文本元素的动画。只要我开始滚动页面,他不应该只在元素锚到达视图端口锚时制作动画吗 我就是不明白 <style> body{height:100% !important;} /*SOLUTION FOR THIS PROBLEM*/ .paralaxel

你好,我试图理解sckrollr,但我似乎在相对使用方面失败了,我试图得到的是:

  • 有X个盒子,里面有一些元素
  • 当元素锚点到达视图端口锚点时,执行一些操作
我不明白我有上面的代码,skrollr做第二个文本元素的动画。只要我开始滚动页面,他不应该只在元素锚到达视图端口锚时制作动画吗

我就是不明白

    <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>

body{height:100%!important;}/*此问题的解决方案*/
.paralaxelem2{宽度:100%;高度:100%;背景:50%0无重复固定;背景大小:100%100%;}
.text{边距:0自动;宽度:500px;填充:150px 0;位置:相对;}
.text h1{填充:0px;边距:0px;文本转换:大写;颜色:#000;}
.text p{背景色:#000;颜色:#fff;填充:15px;}
一些主页标题到处都是
Lorem ipsum dolor sit amet,奉献精英。Id、est、consectetur、officiis、soluta CONDITET即使是临时性的解决方案,也可以是一种类似于软组织的开放式的开放式开放式开放式开放式开放式开放式开放式开放式开放式开放式开放式开放式开放式开放式开放式开放式开放式开放式开放式开放式开放式开放式开放式开放式开放式开放式开放式开放式开放。Et

一些主页标题到处都是 Lorem ipsum dolor sit amet,奉献精英。Id、est、consectetur、officiis、soluta CONDITET即使是临时性的解决方案,也可以是一种类似于软组织的开放式的开放式开放式开放式开放式开放式开放式开放式开放式开放式开放式开放式开放式开放式开放式开放式开放式开放式开放式开放式开放式开放式开放式开放式开放式开放式开放式开放式开放式开放。Et

一些主页标题到处都是 Lorem ipsum dolor sit amet,奉献精英。Id、est、consectetur、officiis、soluta CONDITET即使是临时性的解决方案,也可以是一种类似于软组织的开放式的开放式开放式开放式开放式开放式开放式开放式开放式开放式开放式开放式开放式开放式开放式开放式开放式开放式开放式开放式开放式开放式开放式开放式开放式开放式开放式开放式开放式开放。Et

引用

重要提示:所有这些值都将预先计算并转换为绝对模式。因此,如果元素的框高度(高度、填充、边框)或元素在文档中的位置发生变化,则可能需要调用refresh()(请参阅下面JavaScript部分中的文档)。窗口大小调整由skrollr处理


在本例中,您正在设置垂直填充的动画,这与锚点冲突。这是个鸡/蛋的问题<文档中提到的代码>刷新对您没有帮助。你需要在关键帧中添加额外的填充作为偏移量。

我找到了解决这个问题的方法。似乎其他人也有和我一样的问题,所以问题是skrollr将身体高度设置为“自动”,以进行一些计算,并将具有100%高度的元素(如我的截面元素)弄乱,所以要解决css表单“body{height:100%!important;}”中设置的问题。它为我解决了问题


来源:

谢谢你的回答,但这不是问题所在,盒子的大小没有改变,填充动画是由skrollr在一个内部元素上完成的。