「position: sticky;」より便利！スクロールしたらヘッダやサイドバーがぴたっと貼り付くスクリプト -Fixed Sticky
Post on:2017年4月26日
sponsors
HTMLは汚さずに、ヘッダ、ナビゲーション、サイドバー、ボタンなど、さまざまな要素をスクロールした際に指定した位置にぴたっと貼り付けるスクリプトを紹介します。
IE7+からサポートされており、「position: sticky;」の代替になる便利なスクリプトです。
Fixed Stickyの特徴
Fixed Stickyで貼り付ける要素の位置は、親要素に依存します。
つまり、スクロールしてぴたっと貼り付く位置は、常に親要素となるコンテナ内です。
基本的な動作を見てみましょう。
まずは、要素に「top: 20px;」を指定してみます。
最上部まで20px以上空いている時
下方向にスクロールした場合、その要素はビューポートの最上部から20pxの位置に表示されるまでは通常通りスクロールで移動し、貼り付きません。
20px以下の時
最上部から20px以下になると、その要素以外はスクロールで移動しますが、その要素だけ20pxの位置に貼り付きます。
今度は「bottom: 20px;」を見てましょう。
最下部まで20px以上空いている時
上方向にスクロールした場合、20px以上空いていれば、通常通りにスクロールされて表示されます。
20px以下の時
20px以下であれば、その位置に配置され、コンテナの範囲内で貼り付きます。
参考: 「position: sticky;」のサポートブラウザ
「position: sticky;」はChrome56でサポートされましたが、現状IE, Edge, Opera Miniではサポートされていません。また、SafariやFirefoxでもバグがあるため、利用を控えている人が多いでしょう。
Fixed StickyはIE7+, Android 4.xをサポート、Opera Miniは静的に配置されます。
Fixed Stickyのデモ
デモではスクロールをすると、指定した要素を親要素となるコンテナ内にぴたっと貼り付けます。
Fixed Stickyの使い方
Step 1: 外部ファイル
当スクリプトを外部ファイルとして記述します。
|
1 2 3 4 5 6 7 |
<body> ... コンテンツ ... <script src="jquery.js"></script> <script src="fixedfixed.js"></script> </body> |
Step 2: HTML
貼り付けたい要素にclassを与え、その要素を指定するためのidも与えます。
|
1 |
<div id="my-element" class="fixedsticky"> |
Step 3: CSS
要素を配置するためのCSSを記述します。上部でも下部でも、どんな値でもサポートされています。
|
1 |
.fixedsticky { top: 0; } |
Step 4: JavaScript
jQueryのセレクタで要素を指定し、スクリプトを実行します。
|
1 |
$( '#my-element' ).fixedsticky(); |
sponsors
