今回作るのは、スクロールをしたときにヘッダーが付いてきてきて、ある程度スクロールされたらそのヘッダーが小さくなる、というものです。これもPC・スマホ問わず多くのウェブサイトに実装されている機能ですね。
HTML, CSS と jQuery の関係について、基礎から学びたい方は以下を参考にしてください。
HTMLとCSSとjQueryの関係を超わかりやすく解説【初心者対象】
画面をスクロールすると小さくなるヘッダー
完成形はこんなかんじになります
See the Pen
scroll resize by taichi (@taichi_na)
on CodePen.
画面をスクロールしてみてください。ヘッダーメニューがそのまま画面上部に張り付いたまま付いてきて、ある一定以上スクロールされると、小さく格納されます。
仕組みとしては、スクロールされたときに <ul> にクラスをつけてあげるというシンプルなものです。
では実際にスクリプトを書いてみましょう。
Jquery で実際に動きを実装してみる
See the Pen
scroll resize by taichi (@taichi_na)
on CodePen.
さて、一つずつスクリプトを解読していきましょう！
1. $(window).scroll(function(){
ウィンドウをスクロールしたときに～ という一文です
2. if($(window).scrollTop() > 200){
IF文です。scrollTop() メソッドはスクロールされた量を取得してくれます。
そのスクロールされた量が 200px 以上であったとき、以下の処理を実行する、という一文です。
3. $(“ul”).addClass(“small”);
}
ul に small クラスを追加します。（200px以上のとき）
4. else{
$(“ul”).removeClass(“small”);
else で、「そうでなかった場合」を指定しています。
要するに、画面上部から200px以内の状態では、small クラスは付かないということです。
まとめ：scroll() メソッドでスクロールされたときの処理を実行
HTMLに表記されていないCSSを用意しておいて、それを何らかのアクションが起こった時に表示されるようにする、というのは jQuery の基本かもしれません。
そのアクションは、マウスホバーだったり、クリックだったりしますが、今回はスクロールされたときに～ということで、scroll() メソッドを使用しました。
そしてそのスクロールされた量を scrollTop() メソッドで取得し、IF文で判定をさせクラスを追加もしくは削除しました。
お疲れさまでした！
コーヒーでも飲んでゆっくり休んでください！
