GSAPでサイドバーを固定しながらスクロール追従 #JavaScript

GSAPのScrollTriggerのピン留め機能を使用したら簡単に実装できました。

デモ

See the Pen GSAPでサイドバーを固定しながらスクロール追従 by miyakezaka (@miyakezaka) on CodePen.

GSAPを使う利点

実装が簡単で動作も安定している
スクロールの対象のエリアのみ処理が行われるためブラウザ負荷が少ない
IE11にも対応している

その他の方法で実装した場合

GSAPを使用しないでサイドバーを固定する方法だと主に以下が考えられます。

CSSプロパティのposition: sticky;で実装

position: sticky;を紹介した記事をたくさん目にしますが、使用する場面が限られると思いました。

サイドバーに要素が多いと実装できない
IE11に対応していない（ポリフィル読めば対応できるらしい）

JS処理を組み合わせて実装

こちらは実装と他コンテンツの考慮などとにかく大変でした。

ページによってコンテンツの有無で高さが異なるなど、上手く設計してメンテしないと表示崩れが起きやすい。
スクロールの対象のエリア外でも常に処理が行われるため負担がブラウザ負荷がかかる

コード解説

JS部分のコードの解説に入ります、GSAPの基本的なところは省きます。
まずはGSAP本体とScrollTriggerの２つを読み込みます。

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/ScrollTrigger.min.js"></script>

ScrollTriggerを設定していきます。
ポイントはendTriggerキーに固定を解除したい要素を指定して、endキーに指定要素のどの位置で解除するかを指定します。
マーカーで位置を確認しながら進めるとやりやすいです、狙った箇所で簡単に固定〜解除ができました。

JS

gsap.to('.sidebar', {
  scrollTrigger: {
    trigger: '.sidebar',
    start: 'bottom 100%',
    end: 'bottom 100%',
    endTrigger: 'main',
    pin: true,  
    markers: true
  }
});