Javascript/Jquery Super Scrollorama Проблемы с навигацией

Question

На сайте Wordpress, над которым я сейчас работаю, мой клиент хотел, чтобы различные разделы главной страницы скользили снизу вверх и закрывали предыдущий раздел, как переходы с помощью wipe или slide. Используя суперскроллору, найденную здесь: http://johnpolacek.github.com/superscrollorama/, мне удалось добиться желаемого результата.

Далее мне нужно было создать меню навигации только на первой странице. Я сделал это и установил якоря в разных точках на страницах. Я также использовал библиотеку scrollTo для прокрутки анимации, когда нажимал на ссылки навигационного меню. Однако есть ряд проблем, с которыми я столкнулся:

• Когда вверху я нажимаю "showcase", он выводит меня в раздел showcase, но раздел products (div сразу после него) перекрывает его.
• Другие div-ы, кажется, имеют ту же проблему следующих div-ов, перекрывающих текущий
• Я могу только двигаться вперед. Когда я пытаюсь вернуться назад, это не так (за исключением "Дома")
• Я подумал, что это может иметь какое-то отношение к CSS-свойству "top" div'ов, поэтому я пытался сбрасывать их каждый раз, когда включалась функция click, но это не сработало. Таким образом, я удалил это в настоящее время.
• В настоящее время установите javascript, чтобы предотвратить действие по умолчанию для прокрутки до якорей, и вместо этого установите его для прокрутки к самим фактическим элементам div. Тем не менее, у меня все еще есть те же проблемы.

РЕДАКТИРОВАТЬ: Я решил все вышеперечисленные проблемы, но теперь возникла новая проблема. Если вы прокрутите сайт, измените размер окна браузера и вернетесь назад, вы заметите, что часть дна обрезается. Я посмотрел на страницу superscrollorama, и она имеет ту же проблему. Я надеялся, что кто-то знает, как это исправить.

Вот сайт, над которым я сейчас работаю: http://breathe.simalam.ca/

Вот javascript для прокрутки:

$(document).ready(function() {
jQuery('.home-link').click(function(e){
    e.preventDefault();
    jQuery(window).scrollTo(0, 1000, {queue:true});
});
jQuery('.showcase-link').click(function(e){
    e.preventDefault();
    jQuery(window).scrollTo('#showcase_content', 1000, {queue:true});
});
jQuery('.products-link').click(function(e){
    e.preventDefault();
    jQuery(window).scrollTo('#products_content', 1000, {queue:true});

});
jQuery('.about-link').click(function(e){
    e.preventDefault();
    jQuery(window).scrollTo('#about_content', 1000, {queue:true});

});
jQuery('.locator-link').click(function(e){
    e.preventDefault();
    jQuery(window).scrollTo('#locator_content', 1000, {queue:true});

});
jQuery('.contact-link').click(function(e){
    e.preventDefault();
    jQuery(window).scrollTo('#contact_content', 1000, {queue:true});

}); });

код скроллорамы:

$(document).ready(function() {
    $('#wrapper').css('display','block');
    var controller = $.superscrollorama();
    var pinDur = 4000;  /* set duration of pin scroll in pixels */

    // create animation timeline for pinned element
    var pinAnimations = new TimelineLite();
    pinAnimations
    .append([
        TweenMax.to($('#showcase'), .5, {css:{top:0}})
    ], .5)
    .append([
        TweenMax.to($('#products'), .5, {css:{top:0}})
    ], .5)
    .append([
        TweenMax.to($('#about'), .5, {css:{top:0}})
    ], .5)
    .append([
        TweenMax.to($('#locator'), .5, {css:{top:0}})
    ], .5)
    .append([
        TweenMax.to($('#contact'), .5, {css:{top:0}})
    ], .5)
    .append(TweenMax.to($('#pin-frame-unpin'), .5, {css:{top:'100px'}}));


    controller.pin($('#examples-pin'), pinDur, {
        anim:pinAnimations, 
        onPin: function() {
            $('#examples-pin').css('height','100%');
        }, 
        onUnpin: function() {
            $('#examples-pin').css('height','2000px');
        }
    }); });

Все разделы div находятся внутри родительского div. Все разделы div имеют высоту, ширину и вершину 100%.

Родительский div, содержащий все эти разделы div, выглядит следующим образом:

#examples-pin { 
 position: relative; /* relative positioning for transitions to work? */
 width: 101%; /* max width */
 height: 2000px; /* height of 2000px for now */
 overflow: hidden; /* hide the overflow for transitions to work */
 margin-bottom: -200px; /* negative bottom margin */
}

Answer 1

Таким образом, pushFollowers: false для всех выводов и интервал вручную через div и отступ после того, как закрепленный элемент был решением.

Похоже, эта проблема будет исправлена ​​в следующей версии суперскроллоры. Я хотел бы взглянуть на https://github.com/johnpolacek/superscrollorama/issues выпуск 94, у них есть демо-код их нового выхода.