position: sticky;のおかげで追従コンテンツが簡単に実装出来た件

サイトを2カラム構成にした時、「左のコンテンツをある部分だけ追従させたい」って時ないですか？
自分はそんな時JavaScriptで要素の高さを取って、画面サイズから要素高さを引いて、条件分岐して・・・とJavaScriptをこねくり回すことで実現していました。

しかしposition: sticky;を使うとそれが簡単に実現できてしまうのです！

実際にstickyを加えた動き

stickyがない時

https://codepen.io/seimangorira/embed/MWXXRXv?height=300&default-tab=html%2Cresult&slug-hash=MWXXRXv&user=seimangorira&name=cp_embed_1

stickyがある時

https://codepen.io/seimangorira/embed/yLEErEX?height=300&default-tab=html%2Cresult&slug-hash=yLEErEX&user=seimangorira&name=cp_embed_2

各「stickyのセクション」というタイトルが追従しているのが分かると思います。

stickyは要素の高さを維持する

position: sticky;はposition: fixed;と同じような挙動をしますがposition: fixed;は要素の高さが無くなるのに対して、position: sticky;は要素の高さが維持されます。

よって固定ヘッダー等を設置する際はわざわざマージン等を計算してヘッダーを置かなくてもよくなるので非常に簡単にナビゲーションの設置も可能になります。

そんなposition: sticky;の設定方法はこちら

.sticky {
  position: sticky;
  top: 0;
}

「top」「left」「right」「bottom」を設定することによりstickyの位置を決めれますが最低でもtopを指定しないと上手く挙動しないので最低限topは設定するようにしましょう。

positionプロパティは一癖も二癖もあるプロパティですが慣れれば表現の幅がぐんと広がるので是非使いこなせるようにしましょう！