【jQuery】スクロールに追従するサイドバーの作り方

こんにちは、Ryohei（@ityryohei）です！

本記事はスクロールに追従するサイドバーの作り方のご紹介です。

下記のデモのような動きとなります。

最近はサイドバーが追従するWebサイトを見かけることは少なくなりましたが、現在制作に携わっているWebサイトで同様の処理を実装することになりました。

スクロール中に要素を固定するというと、CSSの「position: sticky」を使えば簡単に実装することができます。ただ、案件の都合上「IE11」に対応しなければならず、またクライアントに指定されたライブラリ以外を使用することはできません。そのため今回はjQueryでスクリプトを書いてみました。

私と同じような状況になる方は少ないと思いますが、勉強のためにjQueryを使ってスクロールに追従するサイドバーを実装してみたい！　という方がいらっしゃいましたら、参考にしていただければ幸いです。

では、解説していきます。

HTMLとCSSでサイドバーを作成する

jQueryでスクリプトを記述する前に、まずはHTMLとCSSでサイドバーを含めたページを作成していきます。本記事では2カラムのレイアウト（メインコンテンツとサイドバーが横並びになったレイアウト）で解説していきます。

HTML

最初にHTMLを作成します。下記のことを意識してコーディングしていきます。

メインコンテンツとサイドバーをラッパー要素で囲む

下記はHTMLのサンプルです。

<header>
</header>

<div id="wrap">
    <main id="main">
        //メインコンテンツ
    </main>
    
    <div id="sidebar">
        //サイドバー
    </div>
</div>

<footer>
</footer>

上記の例ではwrapのid属性を持った要素の中にメインコンテンツとサイドバーを記述しています。wrapで囲んでいる形となります。

CSS

続いてCSSで上記の作成したHTMLにスタイルを定義します。下記のポイントを押さえてスタイルを作成しましょう。

ラッパー要素にposition: relativeのスタイルを定義する
サイドバーにposition: absoluteのスタイルを定義する

下記はCSSのサンプルです。

#wrap {
    position: relative;
    display: flex;
    justify-content: space-between;
    width: 100%;
}

#main {
    width: 69%;
}

#sidebar {
    position: absolute;
    right: 0;
    width: 29%;
}

上記ではflexでメインコンテンツとサイドバーを横並びにしています。floatやinline-blockで横並びにしていただいても大丈夫です。ポイントを押さえてスタイルを定義していただければと思います。

スクロールに追従するサイドバーのスクリプトを作成する

HTMLとCSSでページ全体のコーディングができましたので、続いてスクリプトを作成します。

JS

下記はスクロールに追従するサイドバーを実現するスクリプトになります。基本的にvar sidebarとvar wrapに要素を変更するだけで動くかと思います。

adjustの変数につきましては、スクロール時にサイドバーのtopの位置がずれる場合がありますのでその際の調整用です。環境にあった数値を代入してご利用ください。ずれないようであれば「0」で問題ないかと思います。

$(window).on('load', function () {

    var adjust = 100; //スクロール時のトップ位置調整用（問題なければ0）
    var sidebar = $('#sidebar'); //サイドバーを指定
    var wrap = $('#wrap'); //ラッパーを指定
    
    var adjustTop = 0;
    var sidebarTop = parseInt(sidebar.css('top'));
    var sidebarMax = wrap.height() + adjust - sidebar.height();
    
    $(window).on('scroll', function () {
        
        var h = sidebarTop + $(window).scrollTop();
        
        if (h < sidebarMax) {
            
            if($(window).scrollTop() < adjust) {
                adjustTop = 0;
            } else {
                adjustTop = adjust;
            }
            var offset = sidebarTop-adjustTop + $(window).scrollTop() + 'px';
            sidebar.animate({top: offset},{duration:500, queue: false});
        }
    });
});