まりものメモ帳

なぐり書き

スクロール量に応じて文章を変更する(jQuery)

jQueryを使って自分のサイトで遊んだのでコードとかを置いていきます。

やりたいこと

スクロール量に応じて表示する文字を変えたいと思います。考え方はこんな感じです。

スクロール量をリアルタイムで取得

スクロール量が既定値以上になったら文章を変更

既定値以下になったら文章を戻す

こんな感じでコードを組みます。

下準備

HTMLコードの<head>部分にこのように入力して下さい。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

これでjQueryが使えるようになりました。

コード

HTML

<div id = "changepoint" style="font-size:18px;">↓↓↓READ MORE↓↓↓</div>

JS(HTMLの中に埋め込み)

<script>
	$(function(){
		$(window).scroll(function(){
			var scroll = $(document).scrollTop();
			console.log(scroll);
			if(scroll > 80){
				$("#changepoint").html("↑↑↑Have you read it?↑↑↑");
			} else {
				$("#changepoint").html("↓↓↓READ MORE↓↓↓");
			}
		})
	})
</script>
解説的な何か
$(window).scroll(function() {
})

こうすることでwindowがスクロールされた時に実行する処理を書くことが出来ます。また、windowを"h1"や"div"に変えると指定した要素内でスクロールされた時に実行する処理を書くことが出来ます。
そして、scrollTop()は要素の最上部からスクロールした位置までの距離(px数)をリアルタイムで取得してくれます。それをconsole.log()でスクロール量をコンソール上に残しています。実際のコンソールはこんな感じになっています。
f:id:admarimoin:20180819124015p:plain
ちゃんと表示されてます。やったね。

こっからはif文での条件分岐です。スクロール量が80px以上だとidがchangepointの部分をhtml()で↑↑↑
Have you read it?↑↑↑に変更し、それ以外だと↓↓↓READ MORE↓↓↓にしています。
これらのコードはすべて自分のサイト上http://admarimo.info/にのっけてあるので、アクセスして実際にやってみて下さい。ちゃんと出来ていることが分かると思います。

おわりに

jQueryくん、応用が結構効きそうで面白いなと思いました。自分のサイトに動的な動作も入れてみたかったので満足です。