<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";
						}
					}
				}
			})
		};

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

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