Обмен классами ScrollMagic с циклом .each

Я новичок в использовании ScrollMagic, и я не уверен, что он будет делать то, что я хочу.

У меня есть страница с несколькими разделами, с динамически устанавливаемыми идентификаторами и фиксированной левой навигацией, которая будет прокручивать каждый раздел на основе идентификатора. Простой список с якорными ссылками.

Вот мой 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». Текущее состояние кода — добавление класса в раздел.

Я не могу правильно установить точку срабатывания. Может ли магия прокрутки определять, когда элемент находится в верхней части экрана, или она основана только на триггерах прокрутки.


jquery scrollmagic
person Mark Handy    schedule 25.01.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Чтобы ответить на ваш вопрос, да, 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',
    });
  });
}

это то, что вы искали?

person chiich    schedule 05.02.2019