如何使航点保持活跃的班级

Question

我正在使用航点js，我想让班级＆＃34;活跃＆＃34;在一个＆＃39;里面直到找到与导航中的链接匹配的下一个ID。

导航是粘性的，菜单点是＆＃34;章节＆＃34;。章节有多个部分，所以菜单点必须有效，直到下一个＆＃34;章节＆＃34;菜单点正在激活。

我无法在JSFiddle中使导航变得粘稠，但是在这里你有我在本地使用的代码，除了＆＃34; active＆＃34;课堂问题。

JSFiddle链接：https://jsfiddle.net/2KeRS/47/

这只是一个静态示例，但页面将是动态的，导航

HTML：

<div id="main">
        <div id="navigation-container" class="sticky">
            <nav class="navigation top-bar" data-topbar data-options="scrolltop:false; back_text:&larr;" role="navigation">
                <ul class="title-area">
                    <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
                    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
                </ul>

                <!-- Menu Section -->
                <section class="top-bar-section">
                    <ul class="text-center">
                        <li class="divider"></li>
                        <li><a href="#home">Home</a></li>
                        <li class="divider"></li>
                        <li><a href="#green" data-scroll>Green</a></li>
                        <li class="divider"></li>
                        <li><a href="#orange" data-scroll>Orange</a></li>
                        <li class="divider"></li>
                        <li><a href="#blue" data-scroll>blue</a></li>
                        <li class="divider"></li>
                        <li><a href="#yellow" data-scroll>yellow</a></li>
                        <li class="divider"></li>
                    </ul>
                </section>
                <!-- End Menu Section -->
            </nav>
        </div>`

HOME

绿色

Lorem IpsumL orem ipsum dolor sit amet，consetetur sadipscing elitr，sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat，sed diam voluptua。在vero eos et accusam et justo duo dolores et ea rebum。 Stet clita kasd gubergren，no sea takimata sanctus est Lorem ipsum dolor sit amet。 Lorem ipsum dolor sit amet，consetetur sadipscing elitr，sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat，sed diam voluptua。在vero eos et accusam et justo duo dolores et ea rebum。 Stet clita kasd gubergren，no sea takimata sanctus est Lorem ipsum dolor sit amet。

Lorem Ipsum Lorem ipsum dolor sit amet，consetetur sadipscing elitr，sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat，sed diam voluptua。在vero eos et accusam et justo duo dolores et ea rebum。 Stet clita kasd gubergren，no sea takimata sanctus est Lorem ipsum dolor sit amet。 Lorem ipsum dolor sit amet，consetetur sadipscing elitr，sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat，sed diam voluptua。在vero eos et accusam et justo duo dolores et ea rebum。 Stet clita kasd gubergren，no sea takimata sanctus est Lorem ipsum dolor sit amet。

Lorem IpsumLorem ipsum dolor sit amet，consetetur sadipscing elitr，sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat，sed diam voluptua。在vero eos et accusam et justo duo dolores et ea rebum。 Stet clita kasd gubergren，no sea takimata sanctus est Lorem ipsum dolor sit amet。 Lorem ipsum dolor sit amet，consetetur sadipscing elitr，sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat，sed diam voluptua。在vero eos et accusam et justo duo dolores et ea rebum。 Stet clita kasd gubergren，no sea takimata sanctus est Lorem ipsum dolor sit amet。

橙

Lorem Ipsum Lorem ipsum dolor sit amet，consetetur sadipscing elitr，sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat，sed diam voluptua。在vero eos et accusam et justo duo dolores et ea rebum。 Stet clita kasd gubergren，no sea takimata sanctus est Lorem ipsum dolor sit amet。 Lorem ipsum dolor sit amet，consetetur sadipscing elitr，sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat，sed diam voluptua。在vero eos et accusam et justo duo dolores et ea rebum。 Stet clita kasd gubergren，no sea takimata sanctus est Lorem ipsum dolor sit amet。

Lorem Ipsum Lorem ipsum dolor sit amet，consetetur sadipscing elitr，sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat，sed diam voluptua。在vero eos et accusam et justo duo dolores et ea rebum。 Stet clita kasd gubergren，no sea takimata sanctus est Lorem ipsum dolor sit amet。 Lorem ipsum dolor sit amet，consetetur sadipscing elitr，sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat，sed diam voluptua。在vero eos et accusam et justo duo dolores et ea rebum。 Stet clita kasd gubergren，no sea takimata sanctus est Lorem ipsum dolor sit amet。

Lorem Ipsum Lorem ipsum dolor sit amet，consetetur sadipscing elitr，sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat，sed diam voluptua。在vero eos et accusam et justo duo dolores et ea rebum。 Stet clita kasd gubergren，no sea takimata sanctus est Lorem ipsum dolor sit amet。 Lorem ipsum dolor sit amet，consetetur sadipscing elitr，sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat，sed diam voluptua。在vero eos et accusam et justo duo dolores et ea rebum。 Stet clita kasd gubergren，no sea takimata sanctus est Lorem ipsum dolor sit amet。 Lorem ipsum dolor sit amet，consetetur sadipscing elitr，sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat，sed diam voluptua。在vero eos et accusam et justo duo dolores et ea rebum。 Stet clita kasd gubergren，no sea takimata sanctus est Lorem ipsum dolor sit amet。 Lorem ipsum dolor sit amet，consetetur sadipscing elitr，sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat，sed diam voluptua。在vero eos et accusam et justo duo dolores et ea rebum。 Stet clita kasd gubergren，no sea takimata sanctus est Lorem ipsum dolor sit amet。

`