スクロール時に要素の表示・非表示を切り替えたり、固定配置する動きを実装できるスクリプト 10

  • Posted on
  • Category : Tips
スクロール時に要素の表示・非表示を切り替えたり、固定配置する動きを実装できるスクリプト 10

見かけることもかなり多い(多くなった)スクロールしていくと途中から要素が表示されたり、一定の範囲内のみで要素が固定配置されるといった動きを実装できるスクリプトまとめです。中にはスクロールアップ時には〇〇して、スクロールダウン時には△△するというように、スクロールした方向によって動きを変更したり、特定の箇所まで行った時に関数を実行するというような動きを実装できるものもあります。

紹介している中で特にシンプルな動きのものは、わざわざこういったものを使わなくとも自分で1から実装してしまう方も多いでしょうし、ググれば実装方法も沢山出てはきますが、スクリプトが苦手な方や少しでも手っ取り早く実装したいという方にはやはり便利だと思います。
探せばもっと高機能なものや使いやすいものが沢山あるとは思いますが、自分も利用したことがあるものや目についたものになります。

Headroom.js

Headroom.js

スクロールの方向(上下)にあわせてヘッダーの表示・非表示を切り替えることができるスクリプトで、単体でも動作しますが、jQueryなどのプラグインとして利用することもできます。
ヘッダーの表示・非表示と言いましたが正確にはヘッダーに関わらず利用でき、指定した要素に対して実装することができます。
アニメーションエフェクトなどオプションも幾つか用意されており、それぞれのオプションの組み合わせでどのような表示になるかは「Playroom – Headroom.js」で確認できます。

Headhesive.js

Headhesive.js

スクロール量によって上からヘッダーが降りてきて固定表示され、指定したスクロール量以下になると固定されたヘッダーが消えていくというシンプルなスクリプトです。
オプションやコールバックもなども用意されています。

ScrollUpBar plugin

ScrollUpBar plugin

こちらも動きのシンプルなタイプのjQueryプラグインで、下にスクロールした時にはヘッダーが消え、逆に上にスクロールするとヘッダーが表示されるというものになります。

jquery.cb-slideheader.js

jquery.cb-slideheader.js

スクロールした量によってヘッダーがスライドを用いた表示・非表示する動きを実装できるjQueryプラグインで、作成されたのが日本の方なのもあり、概要・オプション・基本的な使い方の説明など全て日本語で紹介されています。
デモにはヘッダーバーを2つ用意して相互に見え隠れしたり、ヘッダーバーを複製したタイプの実装方法もあります。

jquery-scrollstop

jquery-scrollstop

スクロールの開始・終了時にイベント設定を行うことができるjQueryプラグインです。
スクロール開始時は$(window).on("scrollstart", function(){ ... });、スクロール終了時は$(window).on("scrollstop", function(){ ... });という感じでそれぞれ処理を実装することができます。

Waypoints

Waypoints

スクロール時に特定の箇所で〇〇するという動きを簡単に実装することができるプラグインで、要素の固定表示やInfinite Scrollを組み合わせて実装する方法なども紹介されています。

stickUp

stickUp

縦長のページなどでよく見かける、スクロールしていくと途中から位置が固定されるナビを実装できるjQueryプラグインです。
紹介ページではプラグイン実装以外にも、シングルページやWordPressへの導入時のヒントなども併せて紹介されています。

stickyNavbar.js

stickyNavbar.js

同じくスクロールしていくと途中から固定されるナビを実装できるjQueryプラグイン。
イージング・アニメーションの種類・付加/削除するクラス名・適用させたくないviewport指定など、オプションも幾つか用意されています。

Sticky-Kit

Sticky-Kit

同じくスクロール時に要素を固定表示させるタイプのプラグイン。
デモにもあるように複数の要素を動かしたり、それぞれ違う範囲で固定表示させるといったことが可能です。

jQuery-sticky-elements

jQuery-sticky-elements

こちらも同じく要素を固定させるスティッキー系プラグインになるのですが、他にはないスクロール速度や透明度といったオプション設定をすることができます。

Back to Top

スクロール時に要素の表示・非表示を切り替えたり、固定配置する動きを実装できるスクリプト 10

スクロール時に要素の表示・非表示を切り替えたり、固定配置する動きを実装できるスクリプト 10

/ Tips

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。