在英雄滚动后尝试初始化FullPage.JS

Question

尝试在滚动英雄后启动FullPage.JS。现在，如果你滚过英雄--FullPage将被初始化，并继续以最初滚动的势头滚动浏览幻灯片。我有这个函数在我的初始化。

function initFullPage(){ 
    $(".view-case-study").addClass("projects-load"); 
    $(".pagination").addClass("visible"); 
    $(".logo-menu svg").toggleClass("hovered"); 

    $('#fullpage').fullpage({ 
    lazyLoading:false, 
    navigation: true, 
    navigationPosition: 'right', 
    css3:true, 
    normalScrollElementTouchThreshold: 5, 
    touchSensitivity: 10, 
    anchors: a_anchors, 
    menu: '#myMenu', 
    normalScrollElements: '.nav, .open-nav, .project-inner, .work-mode, .menu-shelf, .tab, .view-case-study, #hero, .hero-center-container', 
    afterLoad: function(anchorLink, index){ 
    var loadedSection = $(this); 
    projectUrl = loadedSection.data('url'); 
    project_title = loadedSection.data('title'); 
    loadedSection.addClass('projects-load'); 
    loadedSection.find(".full-line").animate({'width':'100%'},500); 
    loadedSection.animate({'background-position-y':'-20px','background-size':'120%'},1000); 
    $('#hero').animate({'opacity':'0'},1000); 
    $('#hero').addClass('destroy'); 
    $('.ui-info').animate({'opacity':'1'},350); 
    }, 
    onLeave: function(index, nextIndex, direction){ 
    var leavingSection = $(this); 
    leavingSection.removeClass('projects-load'); 
    leavingSection.find(".full-line").animate({'width':'0%'},250); 
    leavingSection.animate({'background-position-y':'0px','background-size':'110%'},100); 
    $('#project-inner-container').animate({scrollTop:0},0); 
    $('.ui-info').animate({'opacity':'0'},0); 
    } 
    }); 
fullPageInit = true; 
} 

以下是我的英雄滚动脚本。我试图初始化脚本，并沉默移动到第一部分，但它不想听。

var winHeight = $(window).height(); 
$(window).scroll(function() { 

    var scrTop = $(document).scrollTop()/winHeight, 
     scrTopFixed = scrTop.toFixed(2), 
     scrTransform = scrTopFixed * 80, 
    bgPos = scrTransform/10 + 95, 
    heroOpacity = 1 - scrTransform/100; 

if ((scrTransform >= 80) && (fullPageInit == false)) { 
    initFullPage(); 
    $.fn.fullpage.silentMoveTo('#sidepocket'); 
} 

    $('svg.scroll-end').css({ 
     'clip': "rect(0px," + scrTransform + "px,200px,0px)", 
    }); 

}); // Close 

Answer 1

// Scroll SVG Hero 

    $('#scroll-control').on('scroll',function(e){ 
    var totalScroll = $('#scroll-control').scrollTop(); 
    var slowScroll = totalScroll * .2; 
    console.log(slowScroll); 
    $('svg.scroll-end').css({ 
     'clip': "rect(0px," + slowScroll + "px,200px,0px)", 
    }); 
    if(totalScroll > 400){ 
     if((fullPageInit == false) && (workPage == false)){ 
     fullPageInit = true; 
     $('#hero').animate({'opacity':'0'},300,function(){ 
      // remove scroll listener 
      $('#scroll-control').off(); 
      // set first project DOM 
      var wh = window.innerHeight ? window.innerHeight:$(window).height(); 
      $('#fullpage section').height(wh); 
      var loadedSection = $('#fullpage section:first-child'); 
      projectUrl = loadedSection.data('url'); 
      project_title = loadedSection.data('title'); 
      loadedSection.addClass('projects-load'); 
      loadedSection.find(".full-line").animate({'width':'100%'},500); 
      history.pushState(null, null, '#'+projectUrl); 
      loadedSection.animate({'background-position-y':'-20px','background-size':'120%'},1000,function(){ 
      initFullPage(); 
      $('#scroll-control').hide(); 
      }); 

      $('.ui-info').animate({'opacity':'1'},350); 
     }); 
      $('#hero').addClass('destroy'); 
     } 
    } 
    }); 

    var winHeight = $(window).height(); 

    $(window).scroll(function (e) { 
     console.log(e); 
     var scrTop = $(document).scrollTop()/winHeight, 
      scrTopFixed = scrTop.toFixed(2), 
      scrTransform = scrTopFixed * 80, 
     bgPos = scrTransform/10 + 95, 
     heroOpacity = 1 - scrTransform/100; 
    if ((scrTransform >= 80) && (fullPageInit === false)) { 
    } 

    }); // Close 

问题被固定通过设置超时时间，使整页不初始化直到鼠标末端的滚动，所以你不反弹时或有强制用户到下一任势头部分。

希望这有助于其他人试图建立自定义脚本到FullPage.JS

https://www.alexcoven.com