WebデザイナーのためのjQuery実践講座

jQueryでスクロールとその位置を検知する

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
jQueryを使って、ブラウザスクロールの動作とその位置を検知する方法について、解説致します。
講師:
03:42

字幕

このレッスンでは jQuery を使って ブラウザスクロールの動作とその位置を― 検知する方法について解説していきます まずはダウンロードしてきた こちらの scrollevent ― というフォルダーの中に入っている この js フォルダーの中の― この javascript.js ファイルを エディターで開いて下さい そして これがそのファイルを開いた状態です このファイルを使って今回のレッスンの 解説を進めていきたいと思います それでは 早速レッスンを始めていきましょう 今回 注目して頂きたい部分は この javascript ファイルの中の― この部分となります それでは 順番にみていきましょう まずは $ () と書いて その中に window と書いていますね このようにすることでブラウザを 指定することができます そして その後に on と書いて その第一引数に scroll と書いていますね このようにすることで スクロールイベントを― このブラウザに対して 登録することが出来ます そして その後に function と 書いてその後に{}と書きます そして その function の後の波括弧の間に 実際の処理を記述します このように書くことで ブラウザがスクロールされた時に― この function の中の処理を実行する といったスクロールイベントを― 作成することが出来ます では 次に実際の処理を みていきたいと思います まずは変数を作っていますね var と書いて pos と書いています そして = と書いて そして $this この this は ここでは $window 要するにブラウザを指し示します このブラウザのスクロールトップ 要するにブラウザのスクロール位置を― 取得するといった命令になります そのスクロール位置をこの変数 pos に 代入するといった命令になります それでは 実際にどのように動作するか 確認してみたいと思います 分り易いようにここに console.log の命令を打ってみましょう console.log と書いて 括弧 括弧閉じるの セミコロン そして この中に先程の変数 pos と書きます そして ファイルを保存します そして 先程 ダウンロードしてきた  index.html ファイルを― ブラウザで開いて確認してみましょう はい これがその index.html ファイルを ブラウザで開いた状態です では この クロムブラウザの デベロッパー ツールを開きましょう デベロッパー ツールを開く為には こちらのボタンをクリックして― その他ツールの デベロッパー ツールでしたね すると このようにデベロッパー ツールが 表示されてきます そしたら この部分にある Console をクリックします すると コンソール画面が出てきます この状態でこちらのウエブサイトの方を スクロールさせてみましょう では スクロールさせてみます すると このように数字が出てきましたね これがブラウザのスクロール位置です このように表示されたら きちんと jQuery でスクロールイベント及び― スクロール位置の取得が 出来ていることになります 以上でレッスンは終了です 今回は jQuery を使って ブラウザスクロールの動作と― その位置を検知する方法 について解説致しました 以降のレッスンでは  このブラウザスクロールの位置によって― 処理をする内容を分岐させる 方法について解説していきますので― そちらも合わせてご覧下さい

WebデザイナーのためのjQuery実践講座

jQueryとはJavaScriptを簡単かつ便利に扱えるJavaScriptライブラリです。このコースではプログラミングの知識はそれほどないけれど日々仕事でHPを制作しているWebデザイナーの方や趣味で自分のサイトを運営している方などを対象に、jQueryとプラグインを利用してさまざまな機能や効果を手軽にサイトに実装する方法を学びます。

2時間04分 (34 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2015年06月29日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。