当我点击页面底部时，使用 magicscroll 和 greensock 所做的每项更改都会重置

Question

我正在使用 ScrollMagic 和 Greensock 构建侧点导航（有四个点）。一切正常，直到我滚动到页面底部。然后，当我向上滚动时，我的点变得混乱，它们无法正常工作（当我在页面底部的正上方时，第一个点被突出显示），直到我到达页面顶部然后开始再次向下滚动。

此外，无论我是从页面底部还是顶部滚动，setClassToggle 在所有位置都能完美运行。

$(document).ready(function(){
    var controller = new  ScrollMagic.Controller();
    var timeline = new TimelineLite();
    var setMultipleClasses0 = TweenLite.set($(['#home_b', '#services_b', 
  '#contact_b']), {
        className: "dot name-inactive"
    });

    var setSingleClass0=TweenLite.set($("#about_b"),{
        className: "dot name-active"
    });
    timeline.add(setMultipleClasses0).add(setSingleClass0);
    var ourScene = new ScrollMagic.Scene({
        triggerElement:'#about'
    })
    .setTween(timeline)
    .setClassToggle('#about', 'fade-in')
    .addTo(controller);
    /*----------------------------------------*/

            var controller = new  ScrollMagic.Controller();
            var timeline1 = new TimelineLite();
    var setMultipleClasses1 = TweenLite.set($(['#home_b', '#about_b', 
   '#contact_b']), {
        className: "dot name-inactive"
    });
    var setSingleClass1=TweenLite.set($("#services_b"),{
        className: "dot name-active"
    });
            timeline1.add(setMultipleClasses1).add(setSingleClass1);
    var ourScene = new ScrollMagic.Scene({
        triggerElement:'#s_id',
        triggerHook: 0.7
    })
    .setTween(timeline1)
    .setClassToggle('#s_id', 'fade-out')
    .addTo(controller);
    /*----------------------------------------*/

            var controller = new  ScrollMagic.Controller();
            var timeline2 = new TimelineLite();
     var setMultipleClasses2 = TweenLite.set($(['#about_b', '#services_b', '#contact_b']), {
        className: "dot name-inactive"
    });

    var setSingleClass2=TweenLite.set($("#home_b"),{
        className: "dot name-active"
    });
            timeline2.add(setMultipleClasses2).add(setSingleClass2);

    var ourScene = new ScrollMagic.Scene({
        triggerElement:'#h_id',
         triggerHook: "0.00"
    })
    .setTween(timeline2)
    .setClassToggle('#h_id', 'fade-out')
    .addTo(controller);

    /*----------------------------------------*/

            var controller = new  ScrollMagic.Controller();
            var timeline3 = new TimelineLite();
     var setMultipleClasses3 = TweenLite.set($(['#home_b', '#services_b', '#about_b']), {
        className: "dot name-inactive"
    });

    var setSingleClass3=TweenLite.set($("#contact_b"),{
        className: "dot name-active"
    });

            timeline3.add(setMultipleClasses3).add(setSingleClass3);


    var ourScene = new ScrollMagic.Scene({
        triggerElement:'#c_id'

    })
    .setTween(timeline3)
    .setClassToggle('#c_id', 'fade-out')
    .addTo(controller);

  });

Answer 1

解决了伙计们。

我的点在 HTML 中是这样使用的：

                <li><a href="#home" id="home_b" class="dot name-inactive"><span>Home</span></a></li>
                <li><a href="#about" id="about_b" class="dot name-inactive"><span>About</span></a></li>
                <li><a href="#services" id="services_b" class="dot name-inactive"><span>Services</span></a></li>
                <li><a href="#contact" id="contact_b" class="dot name-inactive"><span>Contact</span></a></li>

问题已通过按照我使用 HTML 文件的确切顺序声明场景来解决。下面是工作代码。

 $(document).ready(function(){


      var controller = new  ScrollMagic.Controller();
                    var timeline = new TimelineLite();




     var setMultipleClasses2 = TweenLite.set($(['#about_b', '#services_b', '#contact_b']), {
        className: "dot name-inactive"
    });

    var setSingleClass2=TweenLite.set($("#home_b"),{
        className: "dot name-active"
    });

            timeline.add(setMultipleClasses2).add(setSingleClass2);


    var ourScene = new ScrollMagic.Scene({
       triggerElement:"#h_id"
    })
    .setTween(timeline)
    .setClassToggle('#h_id', 'fade-out')
    .addTo(controller);

    /*----------------------------------------*/


        var controller = new  ScrollMagic.Controller();

         var timeline = new TimelineLite();

    // Create a .set() tween to add "red and bold" classes
    var setMultipleClasses0 = TweenLite.set($(['#home_b', '#services_b', '#contact_b']), {
        className: "dot name-inactive"
    });

    var setSingleClass0=TweenLite.set($("#about_b"),{
        className: "dot name-active"
    });

    timeline.add(setMultipleClasses0).add(setSingleClass0);

    var ourScene = new ScrollMagic.Scene({
        triggerElement:'#about'


    })
    .setTween(timeline)
    .setClassToggle('#about', 'fade-in')
    .addTo(controller);
    /*----------------------------------------*/

            var controller = new  ScrollMagic.Controller();
                    var timeline = new TimelineLite();



     var setMultipleClasses1 = TweenLite.set($(['#home_b', '#about_b', '#contact_b']), {
        className: "dot name-inactive"
    });

    var setSingleClass1=TweenLite.set($("#services_b"),{
        className: "dot name-active"
    });

            timeline.add(setMultipleClasses1).add(setSingleClass1);


    var ourScene = new ScrollMagic.Scene({
        triggerElement:'#s_id',
        triggerHook: 0.7

    })
    .setTween(timeline)
    .setClassToggle('#s_id', 'fade-out')
    .addTo(controller);
    /*----------------------------------------*/



            var controller = new  ScrollMagic.Controller();
                    var timeline = new TimelineLite();




     var setMultipleClasses3 = TweenLite.set($(['#home_b', '#services_b', '#about_b']), {
        className: "dot name-inactive"
    });

    var setSingleClass3=TweenLite.set($("#contact_b"),{
        className: "dot name-active"
    });

            timeline.add(setMultipleClasses3).add(setSingleClass3);


    var ourScene = new ScrollMagic.Scene({
        triggerElement:'#c_id'

    })
    .setTween(timeline)
    .setClassToggle('#c_id', 'fade-out')
    .addTo(controller);




});

当我点击页面底部时，使用 magicscroll 和 greensock 所做的每项更改都会重置

Every change done with magicscroll and greensock get reset when I hit the bottom of the page

javascript

jquery

scrollmagic

gsap