こんにちは、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 sidebarvar 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});
        }
    });
});

最後に

いかがでしたでしょうか。

IE11の対応や制約等がなければCSSで済ませることができるますが、こうやってスクリプトを組んで楽しむのもWeb制作の醍醐味かと思います。一つ一つ経験を積んでいくことで、クライアントの質問に答えられるようになり、提案ができるようになり、実現したいものが実現できるエンジニアに成長していきます。

私もまだまだ成長途中なので、日々勉強して新しいものを吸収できるように努力を続けていきたいと思います。

以上、jQueryでスクロールに追従するサイドバーの作り方のご紹介でした!

この記事を書いた人

Ryohei

Webエンジニア / ブロガー

福岡のWeb制作会社に務めるWebエンジニアです。エンジニア歴は10年程で、好きな言語はPHPとJavaScriptです。本サイトは私がインプットしたWebに関する知識を整理し、共有することを目的に2015年から運営しています。Webに関するご相談があれば気軽にお問い合わせください。

JavaScriptを基礎からしっかりと学びたい方へ

下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。