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

スクロール位置で、条件分岐させる

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ブラウザスクロールの位置によって、処理行う内容を分岐させる方法について解説致します。
講師:
03:05

字幕

このレッスンでは ブラウザスクロールの 位置によって処理を行う内容を― 分岐させる方法について解説していきます まずはダウンロードしてきたこちらの conditional-branch ― というフォルダーの中に入っている こちらの js フォルダーの中の― この javascript.js ファイルを エディターで開いて下さい そして これがそのファイルを開いた状態です このファイルを使って今回のレッスンの解説を 進めていきたいと思います それでは 早速レッスンを始めていきましょう 今回 注目して頂きたい部分は こちらの部分となります 前回までのレッスンで  この $window ― 要するにブラウザですね このブラウザに スクロールイベントを登録して― そして ブラウザをスクロールする度に そのブラウザのスクロール位置を取得して― この変数 pos に 格納する所まで行いました 今回はその pos の値を基準にして 条件分岐を行う方法についてみていきます ジャバスクリプトで条件分岐を行う為には こちらの if 文を利用します まずは if と書いて そして 括弧 括弧閉じる そして この中に条件を書きます 今回は変数 pos が30 以下なら という意味になります この 30 というのは 30 ピクセルですね 要するにブラウザのスクロール位置が 30 ピクセル以下ならば― という意味になります そして その条件に当てはまる場合 こちらの始めの波括弧の間の処理が― 実行されるようになります そして それ以外の場合 要するに今回の場合ですと― 変数 pos の中に入っている値が 30 より上の場合はこちらの else の― 後に続く波括弧の間にある処理が 実行されるようになります これがジャバスクリプトの if 文を使った 条件分岐となります 後はこちらのそれぞれの波括弧の間に 具体的な処理を記述していく訳ですね こちらの前半部分の波括弧の間には このブラウザ位置が 30 ピクセル以下― ということですので 元のヘッダーサイズに戻す― という形 そして こちらの else はこの変数 pos ブラウザのスクロール位置が 30 より上― の時なので 今回の場合ですと そのヘッダーサイズを小さくして― ドロップシャドーを付けるといった処理を この else の中に書いていきます その具体的な方法についても 後のレッスンでご紹介していきますので― そちらも合わせて参考にしてみて下さい 以上でレッスンは終了です 今回はブラウザスクロールの位置によって 処理を行う内容を分岐させる方法について― 解説致しました 次のレッスンでは このブラウザスクロールの 位置によってヘッダーのサイズを― 小さくする方法について解説していきますので そちらも合わせてご覧下さい

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

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

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

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

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

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