今回は画面をスクロールしたときについてくるメニューを作ってみましょう。
スクロールした量を取得し、その値をCSSに反映させるという流れになります。あっという間にできてしまいますが、なるほどぉーと唸ってしまうようなスクリプトになっています。
※HTML, CSS, jQuery の基礎から知りたい方は以下を先に読んでください。
HTMLとCSSとjQueryの関係を超わかりやすく解説【初心者対象】
スクロールするとついてくる！【フローティングメニュー】
完成形はこんな感じです
See the Pen Untitled by taichi (@taichi_na) on CodePen.
メニューをいつも同じ位置に固定することはCSSだけでも可能（position: fixed;）ですが、このように少し遅れてついてくるようにするには、jQuery を使う必要があります。
animate() メソッドを使い、指定したCSSの値を少しずつ変化させることにより、このように「ついてくる」ような表現が可能になるということです。
では実際に制作をしていきましょう！！
HTMLでリストを作り、CSSで絶対配置にしておく
See the Pen followmenu1 by taichi (@taichi_na) on CodePen.
※スマホで見ている方にも理解できるように細く作っていますのでご了承ください。
本文がありその横にリストがあるという、いたってシンプルな構造です。
リストを今回の対象としたいので、
position: sbsolute;
と記述し、絶対配置に変えておきます。
最初、ページを開いたときには、top: 50; なので画面上から50pxのところにこのリストは表示されています。
jQuery が反映されていない状態だと、画面をスクロールしても、リストはそのままそこに残ってしまい、画面から消えてしまいます。
そこで、スクロールした量を取得し、それに画面上から 50px を追加するという形にしたいのです。そしてそれを瞬時に切り替えるのではなく、ゆっくり追随するような形にしていきます。
jQuery で動きをつけていく！
See the Pen followmenu2 by taichi (@taichi_na) on CodePen.
では先ほど作ったリストに対して、動きを実装していきます。
2行目: $(window).scroll(function(){
これはウインドウをスクロールしたときに、波カッコ内の関数を実行します、という一文ですね。
引数に window を指定できると覚えておきましょう。普段はセレクタなんですが。
3行目: $("nav").stop().animate({"top" : $(window).scrollTop() + 50}, 600);
まずは青字の部分の説明です。.scrollTop() で window がスクロールされた量を取得しています。そしてスクロールされた量に、元々の画面上端からリストまでの距離（５０）を追加しているというわけです。
3行目: $("nav").stop().animate({"top" : $(window).scrollTop() + 50}, 600);
次に赤字の部分です。セレクタに nav を指定し、animate() メソッドを使っています。
stop() を付けることによって、メニューボックスが移動中に新たにスクロールされた場合に、その動作をストップしてくれます。リセットに近い感覚です。
これがないと、まともに動いてくれません。上のコードの .stop() の部分を消して動かしてみると体感的に理解できると思いますよ。
最後に、animate の引数（かっこの中身）に注目してみましょう。
animate() というメソッドは、animate(A : B); という形で使われます。
セレクタで指定した要素（nav）に対して、プロパティAの値をBに「段階的に」変える、ということです。
なので上の例では、nav の top の値を $(window).scrollTop() + 50 に変えるということです。
で、最後の600は animate の変化のスピードになります。
まとめ：animate() scrollTop() を上手に使おう！
今回は二つの大事なメソッドを組み合わせて、実用的なページを作ってみました。
スクロールされた量を取得する .scrollTop() は他にもいろいろな使い方ができそうですね。ぜひ、ご自身で工夫をして新しい表現を探してみてください。
animate() も「段階的に変化させる」という、まさに jQuery といった動きをページに付けることができる代表的なメソッドでした。
animate() の使い方は以下でも確認できます。
0 件のコメント:
コメントを投稿