jQueryでスクロールしたらついてくる要素を実装するまで

はじめまして、山口と申します。
現在株式会社ユニマルにてインターンをしております。
プログラミングについて勉強中なのでそこで学んだことを報告させていただきます。
今回はjQueryについてです。


学習課題

今回取り組むことになった課題は、jQueryでスクロールしたらついてくる要素です。

universionsホームページ
でいうと一定量スクロールした時に上からシュッとかっこよく出現する白いメニューバーです。(下の画像参照)

universions-home


学習前の状況

まず勉強する前のわたしの状況ですが、jQueryは名前を聞いたことあるだけでjavascriptも使ったことがないような状況でした。
ですが、最近ちょうどjQuery学習意欲をかなりそそられる記事を読んでいたのでワクワク感はありました。

音楽の夢を奪われた男が絶望の淵でプログラミングと出会い、ジーズアカデミーを好成績で卒業するまで


学習方法

■基礎編

まずは基礎から勉強です。主に以下のサイト見て勉強させていただきました。(勉強した順)

ドットインストール jQuery入門(全20回)

→最初の3回くらいまではついていけましたがそれ以降はなすがままにという感じでした。
特に16回以降のAjax部分はよくわかりませんでした。しかし今までのドットインストール学習と同じように今回初めて知った単語たちが今後繋がっていくでしょう。

7つのサンプルでjQueryを学ぼう!「jQueryが全く分からない人のため」の超初級者向け入門講座
→この記事は超初心者のわたしでも理解しながら最後まで読めました。おすすめです。

CSSは分かるけど jQuery は苦手 … という人が jQuery に親しんでくれるといいなーと思って書きました
7つのサンプルでjQueryを学ぼう!より詳しく、よりたくさんの情報が載っております。

▼コメント

ドットインストールで疑問や分からない点をたくさん作って、文章物でそれらを少しでも回収していくという流れでした。

しかし一通り全て読んでみても、「とりあえずjQueryっていうものがあるんだな」と思うくらいしかついていけませんでした。

■課題実装編

基礎編もそこそこに、課題に向け実装していくうちになんとか理解していくだろう作戦です。
とりあえず課題に似ているものをGoogleで見つけては試してみるの繰り返しです。

主に以下のサイトにお世話になりました。

jQuery基礎講座:スクロール量に応じて出現するナビゲーションエリア(ZIP付)

▼コメント

厳しい道のりでした。結局のべ1日ほど時間を要したでしょうか。最終的に関連しそうなコードをコピペで貼り付け合体させるなど試行錯誤の末動きました。しかしなんのために存在するのか分からないコードがあるなど何がなんだかわかりませんでした。

そんな状態を先生に整理してもらいできあがったのが以下です。(デモはResultボタンクリックで確認できます)

See the Pen jQuery-sample by HYUMA YAMAGUCHI (@Hyuma) on CodePen.0


まとめ

まず、当たり前ですがjQueryについて理解が浅いので参考コードを見つけてもうまく活かすことができませんでした。
 
HTMLやCSSを初めて学習した時に比べてかなり難しさを感じたのですが、変数やif文などが出てきたことが要因だと思います。(どちらも苦手です)

今回できたコードをカスタマイズしてみて理解を深めつつ、変数やif文などもしっかりおさえていきたいと思います。

Author Profile

Yamaguchi Hyuma
ユニマル初のインターン生です。プログラミングとスタートアップについて学んでおります。ゆくゆくは起業して鹿児島、世界に貢献したいです。

フォローして続編をチェック

@universionsをフォロー