<div class="page_navigation">
    <span>PAGE 1</span>
    <span>PAGE 2</span>
    <span>PAGE 3</span>
    <span>PAGE 4</span>
  </div>

    <article>
      <section id="page01" class="section">
        <h1>PAGE 1</h1>
        <div></div>
        <div></div>
      </section>
      <section id="page02" class="section">
        <h1>PAGE 2</h1>
        <div></div>
      </section>
      <section id="page03" class="section">
        <h1>PAGE 3</h1>
        <div></div>
        <div></div>
      </section>
      <section id="page04" class="section">
        <h1>PAGE 4</h1>
        <div></div>
        <div></div>
        <div></div>
      </section>
    </article>
.page_navigation {
    position: fixed;
    top: 50%;
    right: 50px;
    z-index: 10;
    transform: translate(0, -50%);
  }
  .page_navigation span {
    display: block;
    margin: 30px 10px;
    width: 10px;
    height: 10px;
    background: #000;
    border-radius: 50%;
    font-size: 0;
    text-decoration: none;
  }
  .page_navigation span.active {
    background: #fff;
  }
  h1 {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 10;
    transform: translate(-50%, -50%);
    font-size: 50px;
  }
  .section {
    position: relative;
    z-index: 1;
  }
  .section div {height: 300px;}
  #page01 {
    background: orange;
  }
  #page02 {
    background: pink;
  }
  #page03 {
    background: skyblue;
  }
  #page04 {
    background: grey;
  }

      const controller = new ScrollMagic.Controller({loglevel: 3});
      const section = document.querySelectorAll('.section');
      const ratio = []
      const elHeight = [];

      // 컨텐츠 높이값, 화면 비율 설정
      section.forEach( (el, index) => {
        const height = el.clientHeight;
        const num = Number((height/window.innerHeight).toFixed(2));
        elHeight.push(height);
        ratio.push(num);
      });

      // 최소값 결정
      let min = ratio.reduce( (prev, curr) => {
        return prev > curr ? curr: prev
      });
      
      section.forEach( (el, index) => {
        const id = el.getAttribute('id');
        new ScrollMagic.Scene({triggerElement: `#${id}`, duration: elHeight[index], triggerHook: 1-min, loglevel: 3})
					.setClassToggle(`.page_navigation span:nth-child(${index+1})`, "active")
					.addIndicators() // debug
					.addTo(controller);
      });


      window.addEventListener('resize', function() {
        if (window.innerWidth < 800) {
          controller.enabled(false);
        }
      });

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/debug.addIndicators.min.js