今回は画面の左上にスクロールTOPの値をリアルタイムで固定して取得したいと思います。サンプルをコピぺだけで即ためせます(^o^)o
スクロールさせすると、このページの左上にリアルタイムに表示されます。
（表示されない場合はCtrl + F5を押してみてください）。
構文は非常に簡単なので是非試してみてください(*ﾟ▽ﾟ)ﾉ
スクロールTOPで画面の最上部の値を取得
【headに追加】
JQueryライブラリを読み込めるようにします。
1 | <script src="http://code.jquery.com/jquery-1.8.3.js"></script> |
【JQuery】
scrollTopメソッドを使用すると簡単に取得できます＼(^^)／
$(window).scrollTop()
1 2 3 | $(window).scroll(function(){ $(".sample").text($(window).scrollTop()); }); |
pageYOffsetでもスクロール位置を取得できます。
1 2 3 4 | $(window).scroll(function(){ scrollCoordinate = window.pageYOffset; $(".sample").text(scrollCoordinate); }); |
サンプル
【HTML】
コピぺで即試せます(*^^)v
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | <!DOCTYPE html> <html lang="jn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="http://code.jquery.com/jquery-1.8.3.js"></script> <title>スクロールTOPを画面に表示</title> <style> .sample { position: fixed; top: 1px; font-size: 50px; } </style> </head> <body> <div class="sample"> <p>test</p> </div> <script> //スクロールできるように空白を作成 for (let i = 0; i < 100; i++) { document.write('<p> </p>'); } //スクロールしたら画面にスクロールTOPを表示 $(window).scroll(function() { let sclTop = $(window).scrollTop(); $('.sample p').text(sclTop); }); </script> </body> </html> |
【CSS】
cssのfixedによってsampleクラスを画面左上に固定します。
1 2 3 4 5 | .sample { position: fixed; top: 1px; font-size: 50px; } |
まとめ
私のブログでもたくさん使用していますが非常に便利に機能してくれます。
このようにスクロールすると値がリアルタイムにに取得できるので、IFで条件指定して要素のTOP以上スクロールしたら処理！みたいなことが簡単にできるので、是非試してみてください。
スクロールTOP位置ではなくて、ページの一番下の取得は下記。
以上です。
