スクロール量に応じて文章を変更する(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()でスクロール量をコンソール上に残しています。実際のコンソールはこんな感じになっています。
ちゃんと表示されてます。やったね。
こっからはif文での条件分岐です。スクロール量が80px以上だとidがchangepointの部分をhtml()で↑↑↑
Have you read it?↑↑↑に変更し、それ以外だと↓↓↓READ MORE↓↓↓にしています。
これらのコードはすべて自分のサイト上http://admarimo.info/にのっけてあるので、アクセスして実際にやってみて下さい。ちゃんと出来ていることが分かると思います。
おわりに
jQueryくん、応用が結構効きそうで面白いなと思いました。自分のサイトに動的な動作も入れてみたかったので満足です。