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)
?
пример:
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>