HC Stickyはスクロールした時に特定の要素を固定したまま表示できるJavaScriptライブラリです。スクロールとともに見えなくならないような機能を実装したい人に最適です。オプションも豊富でカスタマイズ性にも優れています。
HC Sticky
以下のページからHC Stickyの実際のデモ動作をチェックできます。
デモには全部で8種類のサンプルが用意されています。
- Default – bigger than window
- Default – smaller than window
- Multiple Stickies
- Inner Sticker
- Inner Sticker not following scroll
- Inner Top not following scroll
- Browserify test
- jQuery test
どれも下へスクロールしていくと、特定の要素が固定されたまま表示されるのを確認できるかと思います。常にユーザーの目に触れさせておきたい情報などがある場合にはとても有効な機能になりますね。
オプションには、top、bottom、innerTop、innerSticker、bottomEnd、stickTo、followScroll、stickyClass、responsive、mobileFirst、onStart、onStop、onBeforeResize、onResize、resizeDebounceといった項目が用意されています。
というわけで、要素を固定表示できるカスタマイズ性の高いJSライブラリ「HC Sticky」の紹介でした。HC Stickyの詳しい使い方やダウンロードは、以下のページからどうぞ。
