画面をスクロールした際にサイドバーのコンテンツが画面上に付いて来るように表示させる方法

今回は「画面をスクロールした際にサイドバーのコンテンツが画面上に付いて来るように表示させる」方法をご紹介致します。
本記事ではWordPressを使用した場合の設定方法を詳細に記載します。

といっても、使用するプログラムはWordPressでなくても機能しますので、自身のサイトの構成に合わせてカスタマイズして頂ければ簡単に活用できると思います。

本記事を読むことで下記のような画面に付いて来るコンテンツを設置することができます。

なお、今回参考にさせて頂いたサイト様は下記になります。
解説付き！フッターで止まる、サイドバーを固定する方法【はてなブログ】
最近はやりのフッターに重ならない追尾するサイドバーをjQueryで作ってみました！

今回のブログの見出しはコチラです！

1 WordPressのウィジェットに画面に付いて来るコンテンツを登録する
2 画面についてくる機能を記載したJavaScriptを読み込む
3 【注意！】上記のコードでGoogle AdSenseの広告を画面に付いて来るように表示すると規約違反になります

WordPressのウィジェットに画面に付いて来るコンテンツを登録する

WordPressのサイドバーのウィジェットに画面に付いて来るコンテンツを用意します。
今回は、下記のようにテキストのウィジェットを登録して、idを設定したdivといくつかの文言を設定しました。

idを設定したdivが画面に付いて来るコンテンツになります。

これで、コンテンツの登録は完了になります。

画面についてくる機能を記載したJavaScriptを読み込む

下記のJavaScriptを読み込みます。
※jQueryを使用しているので、本コードを読み込む前に必ずjQueryのライブラリを読み込んでください。

jQuery(function(){
    // ターゲットの要素
    var target = jQuery('#pickup-content');
    // フッターの要素
    var footer = jQuery('#colophon')
    // ターゲットの要素の高さ
    var targetHeight = target.outerHeight(true);
    // ターゲットの要素の幅
    var targetWidth = target.outerWidth();
    // ターゲットのトップ座標
    var targetTop = target.offset().top;
    
    // スクロールイベント処理
    jQuery(window).scroll(function(){
        // 画面上のトップ座標
        var scrollTop = jQuery(this).scrollTop();
        // 画面上のトップ座標位置がターゲットのトップ座標位置を超えた？
        if(scrollTop > targetTop){
            // フッターのトップ座標
            var footerTop = footer.offset().top;
            // （スクロールのトップ座標＋ターゲットの要素の高さ）の位置がフッターのトップ座標位置を超えた？
            if(scrollTop + targetHeight > footerTop){
                // ターゲットのトップ座標をフッターの位置に合わせて変更
                customTopPosition = footerTop - (scrollTop + targetHeight)
                target.css({position: "fixed", top: customTopPosition + "px", width: targetWidth});
            }else{
                // ターゲットを固定の位置で表示
                target.css({position: "fixed", top: "10px",  width: targetWidth});
            }
        }else{
            // 通常表示
            target.css({position: "static", top: "auto"});
        }
    });
});

jQuery(function(){

// ターゲットの要素

var target = jQuery('#pickup-content');

// フッターの要素

var footer = jQuery('#colophon')

// ターゲットの要素の高さ

var targetHeight = target.outerHeight(true);

// ターゲットの要素の幅

var targetWidth = target.outerWidth();

// ターゲットのトップ座標

var targetTop = target.offset().top;

// スクロールイベント処理

jQuery(window).scroll(function(){

// 画面上のトップ座標

var scrollTop = jQuery(this).scrollTop();

// 画面上のトップ座標位置がターゲットのトップ座標位置を超えた？

if(scrollTop > targetTop){

// フッターのトップ座標

var footerTop = footer.offset().top;

// （スクロールのトップ座標＋ターゲットの要素の高さ）の位置がフッターのトップ座標位置を超えた？

if(scrollTop + targetHeight > footerTop){

// ターゲットのトップ座標をフッターの位置に合わせて変更

customTopPosition = footerTop - (scrollTop + targetHeight)

target.css({position: "fixed", top: customTopPosition + "px", width: targetWidth});

}else{

// ターゲットを固定の位置で表示

target.css({position: "fixed", top: "10px", width: targetWidth});

}

}else{

// 通常表示

target.css({position: "static", top: "auto"});

}

});

3行目でターゲット（画面に付いて来るdiv）の要素、5行目でフッターの要素を取得しています。
この部分を各々のサイトに合わせて変更することで、そこそこうまく動いてくれると思います。

何故ターゲットの横幅を入力するのか

今回は、WordPressのサイドバーにテキストのウィジェットを登録して、テキストの中のdivを画面上に付いて来る要素として指定しました。
WordPressのテーマ次第ではあるのですが、基本的にdivには固定の横幅は設定されていません。
そのため、positionをfixedに変更する際に横幅を入力しなければ、下記のように横幅がサイドバーの領域を超えてしまう場合があります。

こういった部分を回避するために、事前にコンテンツの幅を取得しておいて、コンテンツが付いて来る設定に変更された際に横幅も設定するようにしています。

何故フッターの位置を監視しながら表示位置を変えるのか

フッターの位置を監視しなければ、下記のようにサイドバーのコンテンツがフッターを突き抜けてしまう場合があります。

こういった部分を回避するために毎回フッターの位置を監視して、付いて来るコンテンツの位置を決めています。

【注意！】上記のコードでGoogle AdSenseの広告を画面に付いて来るように表示すると規約違反になります

今回ご紹介した「画面をスクロールした際にサイドバーのコンテンツが画面上に付いて来るように表示させる」方法ですが。
画面に付いて来るコンテンツの内容として、Google AdSenseの広告を貼り付ける行為は規約違反となりますのでご注意ください。
詳細は下記のサイト様をご参照ください。
上下にスクロールしたとき、Google AdSenseが一緒についてくる配置方法は利用規約違反

規約の細かい部分は見落としがちですが、しっかりと守ってアドセンスを活用しましょう！

ではまた！