ScrollMagic 类与 .each 循环交换

Question

我是使用 ScrollMagic 的新手，我不确定它是否能达到我想要的效果。

我有一个包含多个部分的页面，具有动态设置的 ID，以及一个固定的左侧导航，它将根据 ID 滚动每个部分。一个带有锚链接的简单列表。

这是我的 HTML：

function pipOnState() {
    console.log('pip on state function');
    var controller = new ScrollMagic.Controller();
    // loop through each section and build the scroll magic scenes
    $section.each(function (i, v) {
      var myScene = new ScrollMagic.Scene({
          duration: 0,
          duration: '20%',
          offset: 100,
          triggerElement: this,
          triggerElement: 0.8,
          triggerHook: 0
        })
        .setClassToggle(this, "on") // add class toggle        
        .addTo(controller)
        .addIndicators({
          name: 'trigger', // custom name for your scene
          indent: 100, // indent from the browser edge
          colorStart: 'yellow', // custom color - colorEnd
          colorTrigger: 'yellow',
        });

    });
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main>
  <section id="s-31554f" class="section  bgGrey" title="Section One">    
    <div class="container">
      
    </div>
  </section>
    
  <section id="s-e53ceb" class="section section-full--height bgBlue" title="Section Two">    
    <div class="container">
    </div>
  </section>
  
  <section id="s-b6d6db" class="section section-full--height bgWhite" title="Section Three">    
    <div class="container">
    </div>
  </section>

<nav class="section-scroll"><ul><li class="section-scroll-item"><a href="#s-31554f" id="ssi-s-31554f" role="button" aria-controls="s-31554f" class="sectionScroll-item--button" rel="nofollow" data-sectionid="s-31554f"><span class="text">Section One</span><span class="icon"> <!--?xml version="1.0" encoding="utf-8"?--><!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  --><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"><path d="M166.4,105.6H98.6l-18.7,88.8H150c53.8,0,70.1-25.7,70.1-49.1C220.2,128.9,208.5,105.6,166.4,105.6L166.4,105.6z"></path></svg> </span></a></li><li class="section-scroll-item"><a href="#s-e53ceb" id="ssi-s-e53ceb" role="button" aria-controls="s-e53ceb" class="sectionScroll-item--button" rel="nofollow" data-sectionid="s-e53ceb"><span class="text">Section Two</span><span class="icon"> <!--?xml version="1.0" encoding="utf-8"?--><!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  --><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"><path d="M166.4,105.6H98.6l-18.7,88.8H150c53.8,0,70.1-25.7,70.1-49.1C220.2,128.9,208.5,105.6,166.4,105.6L166.4,105.6z"></path></svg> </span></a></li><li class="section-scroll-item"><a href="#s-b6d6db" id="ssi-s-b6d6db" role="button" aria-controls="s-b6d6db" class="sectionScroll-item--button" rel="nofollow" data-sectionid="s-b6d6db"><span class="text">Section Three</span><span class="icon"> <!--?xml version="1.0" encoding="utf-8"?--><!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  --><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"><path d="M166.4,105.6H98.6l-18.7,88.8H150c53.8,0,70.1-25.7,70.1-49.1C220.2,128.9,208.5,105.6,166.4,105.6L166.4,105.6z"></path></svg> </span></a></li></ul></nav></main>

因此，想法是，当一个部分位于屏幕顶部时，“sectionScroll-item--button”将获得一个“on”类集。当前代码状态是将类添加到该部分。

我似乎无法正确设置触发点。可以滚动魔术检测元素何时位于屏幕顶部，还是仅基于滚动触发器。

Answer 1

要回答您的问题，是的，ScrollMagic 可以检测元素何时到达屏幕顶部。

我已在下面修改了您的 JS（我已按原样注释掉剩下的部分...）：

function pipOnState() {
  console.log('pip on state function');
  var controller = new ScrollMagic.Controller();
  // loop through each section and build the scroll magic scenes
  $('.section').each(function (i, section) {
    var $section = $(section);
    new ScrollMagic.Scene({
      duration: $section.outerHeight(),
      triggerElement: section,
      triggerHook: 0
    })
    //.setClassToggle(section, "on") // add class toggle        
    //.addTo(controller)
    // .addIndicators({
    //  name: 'trigger', // custom name for your scene
    //  indent: 100, // indent from the browser edge
    //  colorStart: 'yellow', // custom color - colorEnd
    //  colorTrigger: 'yellow',
    });
  });
}

这就是你要找的吗？