要素の固定表示を簡単に実装できる
「position: sticky;」についてご紹介します。

「position: sticky;」とは

position: sticky;を指定した要素は、スクロールに応じて親要素の範囲内で位置を固定できます。

 

DEMO

使い方

・css

固定したい要素に、position: sticky; と位置（top, right, bottom, left）を指定します。

position: sticky; による要素の固定が有効となるのは、position: stickyを指定している要素の親要素の表示範囲内までです。
position: sticky; を指定している要素の親要素の終了位置にくると、固定が解除されます。

 

DEMO

注意点

以下の場合、stickyが効かないため注意が必要です。

・親要素との高さの差がない
※position: sticky; を指定した要素より親要素の高さが短い、差がない場合、stickyは効きません。
親要素自体に高さを持たせる、兄弟要素を追加して高さを持たせる 等、親要素にstickyを指定した要素以上の高さを持たせることで、stickyが機能するようになります。

 

・position: sticky; を指定している要素の親要素、先祖要素にoverflow: hidden;が指定されている
position: sticky; を指定している要素の親要素、先祖要素に overflow: hidden; が指定されていると position: sticky; が効きません。

IEに対応させる

position: sticky;　はIE未対応ですが、以下の方法でIEにも対応させることができます。

footerに以下を記述します。
Javascriptの場合と、jQueryの場合、サイトに合わせて選択し使用してください
※jQueryの場合はjQuery本体を読み込んでおく必要があります

 

固定（position: sticky;）させたい要素に、stickyクラスを追加します。