親要素内でスクロールに追随する要素を実装できるjQueryプラグイン「Fixed Sticky」

親要素内でスクロールに追随する要素を実装できるjQueryプラグイン「Fixed Sticky」

親要素内でスクロールに追随する要素を実装できるjQueryプラグイン「Fixed Sticky」

Fixed Stickyは、親要素にピタッと張り付いてスクロールに追随する要素を実装できるjQueryプラグインです。

挙動については、以下デモページをご参照ください。

デモページを見る

当記事では、Fixed Stickyの実装方法についてご紹介いたします。

Fixed Stickyの実装手順

ステップ1. Fixed Stickyのダウンロードと設置

まずはGitHubからFixed Stickyをダウンロードします。ダウンロードしたファイルを解凍し、fixedsticky.jsをサーバー上にアップロードしましょう。

ファイルが設置できたら、以下を<head>~</head>内に記述して、jQuery本体とfixedsticky.jsを読み込みます。


<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="js/fixedsticky.js"></script>

ステップ2. スクロール追随する要素のマークアップ

スクロール追随させたい要素にクラスとIDを付与します。

<div id="my-element" class="fixedsticky">

ステップ3. CSSの調整

CSSで要素の位置を調整します。

.fixedsticky { top: 0; }

上記の場合、要素が最上部に張り付いてスクロール追随します。

ステップ4. スクリプトの実行

最後にスクリプトを実行します。

<script>$( '#my-element' ).fixedsticky();</script>

あとがき

古いブラウザにも対応させなくてはいけない状況で、CSSの「position:sticky;」の代わりになるものを探している場合は、ぜひお試しください。

この記事が気に入ったら
いいね!してね♪

Twitter で

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です