Воспроизведение закрепленных элементов в суперскроллоре

Question

Я строю веб-сайт Parallax, используя SuperScrollorama, в котором есть анимация покадрово, используя jquery и css3...

Но после этого я застрял в проблеме, я пытаюсь перемещаться по страницам с помощью некоторого плагина прокрутки...

Я пробовал Basic JQuery с помощью scrollTop событие, используя Jquery ScrollTo и плагин Tween Lite ScrollTo для навигации по страницам, но, похоже, ничего не работает...

Проблема, которую я получаю после изумления, заключается в том, что если страницы скреплены как position:fixed; и страницы не прокручиваются до этой позиции и застряли между...

С помощью Jquery ScrollTo мой код:-

$('.menus a').click(function(e){
    e.preventDefault();
    $.scrollTo(this.hash, 2000, {
    easing:'easeInOutExpo',
    offset:3000,
    axis:'y',
    queue:true
    });
});

С базовым jquery scrollTop мой код:-

$('a').bind('click',function(event){
    var $anchor = $(this);

    $('html, body').stop().animate({
        scrollTop: $($anchor.attr('href')).offset().top
    }, 1500,'easeInOutExpo');

    event.preventDefault();
});

В настоящее время мой код работает так:- http://jsfiddle.net/tFPp3/6/

Как вы можете видеть в моем демо, свиток застрял между тем, прежде чем достигнуть точного положения через хеш...

Какое решение, если мне нужно играть через закрепленные элементы в Superscrollorama?

Answer 1

Вам нужно будет сделать 2 анимации: одну, чтобы достичь смещения ancher, а затем, после того, как superscrollorama добавит новый элемент для анимации и пересчитать высоту документа, выполните вторую анимацию, чтобы достичь правильного ключевого кадра на этой странице (который вы зафиксировали по смещению 3000 из этого раздела).

$(function(){
    var hashes = [];

    $('.menus a').each(function(){
        hashes.push(this.hash);
    });
    console.log('hashes:', hashes);

    $('.menus a').click(function(e){
        e.preventDefault();
        var h = this.hash;
        var pageTop = $(h).offset()['top'];
        console.log('pageTop=',pageTop);

        $.scrollTo( pageTop+1, 2000, {
            easing:'easeInExpo',
            axis:'y',
            onAfter:function(){
                setTimeout(function(){
                    console.log('hashes:', hashes);
                    var id = hashes.indexOf(h);
                    console.log('hashes['+(id+1)+']=', hashes[(id+1)]);
                    var nextPageTop = $(hashes[id+1]).offset()['top'];
                    console.log('nextPageTop=', nextPageTop);
                    var keyOffset = pageTop + 3000;
                    console.log('keyOffset=',keyOffset);

                    if(keyOffset < nextPageTop ){
                        $.scrollTo( keyOffset, 2000, {
                          easing:'easeOutExpo',
                          axis:'y'
                       }); 
                    }
                },100);
            }
        });
    });
});

Обратите внимание, что смещение каждого раздела постоянно меняется, поэтому перед запуском второй анимации мы должны проверить, что мы не прокручиваем до следующего раздела снова. Нам также нужна небольшая задержка, чтобы superscrollorama смогла приготовить соус перед тестированием соответствующих смещений (к сожалению, похоже, что для этого не предусмотрено событие).

Answer 2

У меня была такая же проблема, как и у вас. Вот как я это исправил....

Прежде всего, мы знаем, что Superscrollorama добавляет распорную булавку перед вашим элементом, она устанавливает высоту элемента, которая определяет, как долго пользователь должен прокручивать раздел (продолжительность).... Так что в теории все, что мы должны сделать это сложить все высоты выводов, которые происходят ДО элемента, на который вы хотите прокрутить, а затем сместить от вершины этого элемента...

То, что я сделал, было....

Узнайте, к какому элементу вы хотите перейти. Проверьте, сколько существует спейсроллорам-выводов-проставок перед этим выводом, определите высоту всех выводов и затем сместите его в исходную функцию scrollTo.

pin = $('#pin-id').prev(); //find the spacer pin
prevPin = pin.prevAll('.superscrollorama-pin-spacer'); //find all the pins before this
heights = []; //create an array to store the pin heights

$.each(prevPin, function( index, value ) {

    value = $(this).attr('height'); //get each height
    heights.push(value);   // push it to array

});

//use eval to join all the heights together
heights = eval(heights.join("+")); 

Теперь у нас есть высота, поэтому давайте перейдем к ней.....

TweenMax.to($('html,body'),1, { scrollTop:heights, });

Удачи! Я надеюсь, это поможет вам.

Answer 3

У меня была похожая проблема, и я обнаружил, что janpaepke в проекте superscrollorama добавил дополнительный переключатель, чтобы сделать это проще.

Вы можете вручную добавить проставки, так что вам не нужно вносить изменения, установив для флага pushFollowers на вашем выводе значение false.

Пример JS

controller.pin($('#pin-id'), 200, {
    anim: new TimelineLite().append([TweenMax.fromTo( $('#pin-id'), 2, {css:{opacity: 1}}, {css:{opacity: 0}})]),
    offset: 0,
    pushFollowers: false
}); 

Пример HTML

<div id="pin-id">

Bunch of Content

</div>
<div style="padding-top: 200px"></div>