ScrollMagic class swap with a .each loop

I'm new to using ScrollMagic, and I'm not sure it will do what I want.

I have a page with multiple sections, with dynamically set ID's, and a fixed left nav that will scroll each section based off the ID. A simple list with anchor links.

Here's my 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>

So, the idea is, when a section is at the top of the screen, the 'sectionScroll-item--button' will get an 'on' class set. The current code state is adding the class to the section.

I can't seem to set the trigger point correctly. Can scroll magic detect when an element is top of screen, or is it only based of scroll triggers.

Solution

To answer your question, yes, ScrollMagic can detect when an element hits the top of the screen.

I've modified your JS below (I commented out bits left as-is...):

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',
    });
  });
}

is that what you were looking for?