fullpage.js - после запуска resposive jQuery.position() и.offset() по-прежнему возвращают 0,0

Пытался использовать ScrollMagic с fullpage.js - я искал и нашел только то, что предлагается использовать scrollBar: true или же autoScrolling: false однако, чтобы включить позиционирование или смещение jQuery, после отклика (который превращает страницу в обычный сайт с прокруткой) позиция все еще остается в этой (0,0) позиции.

Это кажется немного запутанным, как я думаю, если я скажу:

autoScrolling: true,

но

responsiveWidth: 991

и через документацию:

Обычная прокрутка (autoScrolling:false) будет использоваться при определенной ширине в пикселях... Например, если задано значение 900, когда ширина браузера меньше 900, плагин будет прокручиваться, как обычный сайт.

Так почему бы не мой $('.fp-section').position() работать после проверки на отзывчивость в afterResponsive(isResponsive)?

пример:

Codepen

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);
    }
  }
});
.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;
}
<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>

0 ответов

Другие вопросы по тегам