本日はCSSのみでスクロール固定できるstickyについての基本を解説していきたいと思います(*ﾟ▽ﾟ)ﾉ
それではいってみましょう！
Menu
stickyの基本
まずstickyはこれから解説する事が分からない場合、たまたまサイトの固定させたい要素に適用させたら、固定できたという場合は、ただただラッキーなだけになります。
ですので必ず下記の概念をマスターすることが重要になります！
親要素 → Stickyコンテナ
子要素 → Stickyアイテム
CSSの → position: stickyを適用することで、
・親要素内で子要素が浮遊（フロート）します。
・スクロールさせて子要素が画面のTOP位置に到達すると固定され、子要素が親要素の底に到達すると、子要素が親要素に連動して移動していきます。
・ですので子要素が固定できるのは、親要素の底までということになります。
こういうことです ↓(^o^)o
ですので！
スクロール固定ができないパターンは…
子要素と親要素の底が一緒で、スペースがない場合はスクロール固定はできません(≧∇≦)
ということで
スクロール固定ができるパターンは…
子要素の下に、親要素のスペースが絶対必要になります。
例としては右サイドのスポンサーリンクの固定→→→→→→→→→→→→→
こちらはStickyでスクロール固定させてます(*^^)v
こういうのを全ページに自動表示させる場合なSticky＋jQuery(javascript)の要素を追加で作成します。
CSS構文（画面上部に固定させる場合）
・Stickyを適用する場合は、子要素（Stickyアイテム）に設定します。
・topプロパティの値は、画面のお好きなTOP位置を指定します。
1 2 3 4 5 | セレクター{ position: -webkit-sticky; position: sticky; top: 1px; } |
※もしスクロールして他の要素に重なって見えなくなる場合は
z-index: 100;
を追加します。
右サイドの一番下の要素をスクロール固定する場合
右サイドのサンプルで解説します(*^^)v
赤の背景色 → 親要素
黒の背景色 → 子要素
で作成してみたので分かりやすいと思います。
スクロールTOP固定ができるパターン
※今回はわかりやすいように赤と黒の背景色で、親要素と子要素に色付けしてますが、実践ではこれが見えないので苦戦する場合があります。
スクロールTOP固定ができないパターン
※子要素にstickyを適用したのに固定できない場合は必ずこうなってます(≧∇≦)
私のサイトが実はこうだったので、下記の方法で回避することができました(*^^)v
回避方法
回避方法は親要素の一つ上の先祖要素にdisplay: flexを適用することで回避できます。
先祖要素にdisplay: flexを適用させたことで、親要素の高さが先祖要素の末端まで下に伸びます。
すると親要素の下に子要素が固定できるスペースが確保できたので、スクロールTOP固定ができるようになります＼(^^)／
naviボタンをスクロール固定する場合は、ほとんどのサイトがヘッダーの中に納まってるので、そのままnaviボタン（子要素）にstickyを設定しても固定はできません。
※下記サンプル画像のように親要素のheader(赤の背景色)の高さが低い、もしくは親要素と子要素の底が一緒の場合は不可です。
スクロールTOP固定ができないパターン
スクロール固定をできるようにする①
naviボタンをスクロール固定するには、ヘッダーの領域の外に出すことでスクロール固定が可能になります。親要素に高さがあるものを選んで配置することで、スクロール固定が可能になります。
【適用する親要素】
サイトによって若干違いますが…
bodyとかwrapperとか
【ヘッダーの上にNAVIを配置】
スクロール固定をできるようにする②
➀と親要素は一緒で、配置をヘッダー下に移動しただけです。
【適用する親要素】
サイトによって若干違いますが…
bodyやwrapperとか…
【ヘッダーの下にNAVIを配置】
スクロール固定をできるようにする③
コンテナー（コンテンツやサイドの親）の上部に配置します。
親要素をコンテナーの上部に配置することで高さも十分あるので、NAVIボタンをスクロール固定できます。
一見先程のヘッダー下に配置したように見えると思います。ですが親要素の範囲が違い底も違うので、下記のような動作になります。
【適用する親要素】
サイトによって若干違いますが…
container（コンテンツやサイドの親）
【コンテナー上部にNAVIを配置】
※どうしてもヘッダーの中で固定させたい場合はjQuery(javascript)を使用すれば固定できます。
まとめ
stickyは簡単にできそうですが、実は結構奥が深いです。子要素を固定させるための親要素に、下のスペースがきちんとあるかがstickyで固定させる一番重要ポイントになります。そして固定できるのは親要素の底までです。もしてこずってる場合はそのあたりをきちんと調べ上げることが重要になります。
今回のようにCSSだけでスクロール固定が可能なら、jQueryやjavascriptを使用しないで、CSSだけで作成したほうが簡単だし、javascriptのような境目の微調整は特に必要ないので、大幅な時短ができます。
jQueryの固定の方法はこちら
以上です。
