mgn-scroll-nav

Implement scroll position with linked navigation. If scroll position intrudes the specified content area, assign class="active".

https://github.com/frontend-isobar-jp/mgn-scroll-nav


new mgnScrollNav(
    ".j-scrollnav",
    {
        boxElm: '.f-box',
        activeElm: '.icon',
        posFix:  '50%',
        edgeJudge: false

    }
);


<div id="box1" class="f-box"></div>
<div id="box2" class="f-box"></div>
<div id="box3" class="f-box"></div>
<div id="box4" class="f-box"></div>
<div id="box5" class="f-box"></div>

<nav class="j-scrollnav">
    <span class="icon"><a>コンテンツ1</a></span>
    <span class="icon"><a>コンテンツ2</a></span>
    <span class="icon"><a>コンテンツ3</a></span>
    <span class="icon"><a>コンテンツ4</a></span>
    <span class="icon"><a>コンテンツ5</a></span>
</nav>