滚动浏览英雄后尝试初始化 FullPage.JS答案

【问题标题】：Trying to initialize FullPage.JS after scrolling through hero滚动浏览英雄后尝试初始化 FullPage.JS
【发布时间】：2017-05-05 05:45:11
【问题描述】：

在滚动英雄后尝试启动 FullPage.JS。现在，如果您滚动过英雄 - FullPage 会被初始化并继续以初始滚动的势头滚动幻灯片。我为我的 init 准备了这个函数。

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

【问题讨论】：

为什么不为英雄创建一个部分？
在您的示例alvarotrigo.com/fullPage/examples/scrolling.html 中，滚动势头仍然延续到下一部分。如果您快速滚动，它将继续滚动到当前幻灯片之外。我还希望滚动 svg 在删除/销毁自身并引入 section-01 之前填充
你的英雄使用滚动条吗？
@Alvaro 滚动条是隐藏的，但它使用默认的网页滚动功能来填充英雄的 svg 居中底部。
@Alvaro 我终于明白了！

标签： javascript jquery scroll fullpage.js

【解决方案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 在鼠标滚动结束之前不会初始化，因此您不会过度滚动或有任何动力迫使用户进入下一个部分。

希望这有助于其他尝试将自定义脚本构建到 FullPage.JS 中的人

https://www.alexcoven.com

【讨论】：