CodePen Embed - クリック

<div id="app" v-scroll="handleScroll">
    <p class="scValue">{{scPos}}</p>
    <h1 class="centered">Scroll me</h1>
    <div>
      <p>ダミーテキスト　ダミーテキスト　ダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキスト
        ダミーテキスト　ダミーテキスト　ダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキスト.
      </p>
      <p v-bind:class="actives">
        ダミーテキスト　ダミーテキスト　ダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキスト
        ダミーテキスト　ダミーテキスト　ダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキスト
        ダミーテキスト　ダミーテキスト　ダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキスト.
      </p>
      <p v-bind:class="actives">
        ダミーテキスト　ダミーテキスト　ダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキスト
        ダミーテキスト　ダミーテキスト　ダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキスト
        ダミーテキスト　ダミーテキスト　ダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキスト.
      </p>
      <p>ダミーテキスト　ダミーテキスト　ダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキスト
        ダミーテキスト　ダミーテキスト　ダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキスト.
      </p>
      <p>ダミーテキスト　ダミーテキスト　ダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキスト
        ダミーテキスト　ダミーテキスト　ダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキスト.
      </p>
      <p>ダミーテキスト　ダミーテキスト　ダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキスト
        ダミーテキスト　ダミーテキスト　ダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキスト.
      </p>
      <p>ダミーテキスト　ダミーテキスト　ダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキスト
        ダミーテキスト　ダミーテキスト　ダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキスト.
      </p>
      <p>ダミーテキスト　ダミーテキスト　ダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキスト
        ダミーテキスト　ダミーテキスト　ダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキスト.
      </p>
      <p>ダミーテキスト　ダミーテキスト　ダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキスト
        ダミーテキスト　ダミーテキスト　ダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキスト.
      </p>
      <p>ダミーテキスト　ダミーテキスト　ダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキスト
        ダミーテキスト　ダミーテキスト　ダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキスト.
      </p>
      <p>ダミーテキスト　ダミーテキスト　ダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキスト
        ダミーテキスト　ダミーテキスト　ダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキスト.
      </p>
      <p>ダミーテキスト　ダミーテキスト　ダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキスト
        ダミーテキスト　ダミーテキスト　ダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキスト.
      </p>
      <p>ダミーテキスト　ダミーテキスト　ダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキスト
        ダミーテキスト　ダミーテキスト　ダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキスト.
      </p>
      <p>ダミーテキスト　ダミーテキスト　ダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキスト
        ダミーテキスト　ダミーテキスト　ダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキスト.
      </p>
      <p>ダミーテキスト　ダミーテキスト　ダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキスト
        ダミーテキスト　ダミーテキスト　ダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキスト.
      </p>
      <p>ダミーテキスト　ダミーテキスト　ダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキスト
        ダミーテキスト　ダミーテキスト　ダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキスト.
      </p>
      <p>ダミーテキスト　ダミーテキスト　ダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキスト
        ダミーテキスト　ダミーテキスト　ダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキストダミーテキスト　ダミーテキスト.
      </p>
    </div>
  </div>

.aaa {
      background: red;
    }

    .bbb {
      background: blue;
    }

    .scValue {
      position: fixed;
      top: 0;
      left: 0;
    }

window.onload = function () {
      Vue.directive('scroll', {
        inserted: function (el, binding) {
          let f = function (evt) {
            if (binding.value(evt, el)) {
              window.removeEventListener('scroll', f)
            }
          }
          window.addEventListener('scroll', f)
        }
      })

      // main app
      new Vue({
        el: '#app',
        data: {
          actives: "bbb",
          scPos: window.scrollY
        },
        methods: {
          handleScroll: function (evt, el) {
            this.actives = "aaa";
            this.scPos = window.scrollY;
            if (window.scrollY > 50) {
              this.actives = "aaa";
            } else {
              this.actives = "bbb";
            }
          }
        }
      })
    };

This Pen is owned by 篠原としや on CodePen.

See more by @shinop on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js