fullpage.js - 触发resposive后，jQuery.position（）和.offset（）仍然返回0,0

Question

尝试将ScrollMagic与fullpage.js一起使用 - 我已经搜索过，并且发现建议使用scrollBar: true或autoScrolling: false来启用jQuery定位或偏移，但是，在响应时（转为页面进入正常滚动网站），该位置仍然保持在该（0,0）位置。

如果我说：

，这在我看来似乎有点令人困惑

autoScrolling: true,

但

responsiveWidth: 991

并通过文档：

  

将在定义的宽度（以像素为单位）下使用正常滚动（autoScrolling：false） ...例如，如果设置为900，则每当浏览器的宽度小于900时该插件将像普通网站一样滚动。

那么，在$('.fp-section').position()中检查自己的响应后，为什么我的afterResponsive(isResponsive)无法工作？

示例：

Codepen

＆＃13;

＆＃13;

jQuery('#main').fullpage({
  //Navigation
  lockAnchors: false,
  navigation: true,
  navigationPosition: 'left',
  showActiveTooltip: false,
  slidesNavigation: false,

  //Scrolling
  scrollingSpeed: 700,
  autoScrolling: true,
  fitToSection: false,
  fitToSectionDelay: null,
  scrollBar: false,
  easingcss3: 'ease',
  scrollHorizontally: true,
  offsetSections: false,
  resetSliders: false,
  touchSensitivity: 15,
  normalScrollElementTouchThreshold: 5,
  bigSectionsDestination: 'top',
  dragAndMove: 'fingersonly',

  //Accessibility
  keyboardScrolling: true,
  animateAnchor: true,
  recordHistory: false,

  //Design
  sectionsColor: ['#ccc', 'black', '#ccc'],
  responsiveWidth: 991,

  //Custom selectors
  sectionSelector: '.section',
  lazyLoading: true,
  afterResponsive: function(isResponsive) {
    var scene = [];
    var parallaxTween = [];
    var box = jQuery('.moveme');
    var parallax = new TimelineMax();
    var controller = new ScrollMagic.Controller({
      globalSceneOptions: {
        triggerHook: .5,
        duration: window.innerHeight + 50
      }
    });

    for (var i = 0; i < box.length; i++) {
      var yPer = -100;
      var yEnd = 100;
      //reset scene on responsive
      if (scene[i])
        scene[i].destroy(true);
      parallaxTween[i] = null;
      scene[i] = null;

      console.log(box.closest('.section').position());

      parallaxTween[i] = parallax.fromTo(jQuery('.container').eq(i), 1, {
        yPercent: yPer
      }, {
        yPercent: yEnd,
        ease: Linear.easeNone
      }, 0);

      scene[i] = new ScrollMagic.Scene({
          triggerElement: jQuery(box[i]).closest('.section'),
        })
        .setTween(parallaxTween[i])
        .addIndicators()
        .addTo(controller);
    }
  }
});

＆＃13;

.section {
  position: relative;
}

.container {
  position: absolute;
  background: blue;
  color: white;
  width: 100px;
  height: 100px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.moveme {
  margin: 0;
  line-height: 100px;
  text-align: center;
}

＆＃13;

<main class="site-main fullpage-wrapper" id="main" role="main" style="height: 100%; position: relative; transform: translate3d(0px, 0px, 0px); transition: none;">
  <div class="section">
    <div class="container">
      <p class="moveme">i should move
        <p>
    </div>
  </div>
  <div class="section">
    <div class="container">
      <p class="moveme">i should move
        <p>
    </div>
  </div>
  <div class="section">
    <div class="container">
      <p class="moveme">i should move
        <p>
    </div>
  </div>
</main>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.7/jquery.fullpage.extensions.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/jquery.ScrollMagic.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/1295227/animation.gsap.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/1295227/debug.addIndicators.js'></script>

＆＃13;

＆＃13;

＆＃13;