ScrollMagic类交换了。每次循环

问题描述 投票:0回答:1

我是新来使用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项目 - 按钮”将得到一个“开”类集合。当前代码状态被添加到类的部分。

我似乎无法正确设置触发点。可以滚动,当一个元素是顶级屏幕,或者它只是基于滚动触发魔法检测。

jquery scrollmagic
1个回答
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',
    });
  });
}

这就是你要找的东西?

© www.soinside.com 2019 - 2024. All rights reserved.