JavaScriptで、ブログのサイドバーを固定させて追尾させる

サイドバー

ブログのサイドバーを固定させて、追尾させたい!

システムエンジニア(SE)かっきーです。

サイドバーが短いサイトはスクロールしても消えてしまうので、固定させてサイドバーを追尾させたくありませんか?
じつは、JavaScriptを使って簡単に実装できてしまうのです。

JavaScriptコード

まず、こちらのコードをメモ帳に転記し、拡張子を「.js」にしてAPサーバにアップロードしてください。

// PC用のサイドバー固定
(function(){
	 $(function(){

		 var fix = $('#pc-side-nav'), //固定したいコンテンツ
		 side = $('.sidebar'), //サイドバーのID
		 main = $('#main'), //固定する要素を収める範囲
		 sideTop = side.offset().top;
		 fixTop = fix.offset().top,
		 mainTop = main.offset().top,
		 w = $(window);

		 var adjust = function(){
			 fixTop = fix.css('position') === 'static' ? sideTop + fix.position().top : fixTop;
			 var fixHeight = fix.outerHeight(true),
			 mainHeight = main.outerHeight(),
			 winTop = w.scrollTop();

			 if(winTop + fixHeight > mainTop + mainHeight){
				fix.removeClass('pc-side-nav-fixed');
			}else if(winTop >= fixTop){
				fix.addClass('pc-side-nav-fixed');
			}else{
				fix.removeClass('pc-side-nav-fixed');
			 }
		 }

		 w.on('scroll', adjust);
	 });
})(jQuery);

saidebar.phpの編集

サイドバーは、「saidebar.php」で制御しているが表示させているところは「index.php」や「single.php」のため、表示させているphpファイルを編集する必要があります。
wordpress管理画面の「外観」→「テーマの編集」から該当のファイルを選択してください。

下記のようにメインのコンテンツとサイドバーは表示させているところに、少し追記します。

<body>
  
<main id="main">
	// メインコンテンツをここに設置
</main>
 
<!-- sidebar -->
<div class="sidebar" id="pc-side-nav">
// 固定したいコンテンツをここに設置
</div>

<footer>
</footer>
 
</body>

後はお好みでcssでデザインしてください。
これだけで完成です。

記事の文章作成や、Wordpressサイトのカスタマイズで
お困りではありませんか?
ライティングレシピでは、文章コンサルとWordpressサイトのカスタマイズを承っております!

文章コンサル
●文章力をあげてスキルアップしたい
●SEOを意識した文章を書きたい
●ライター目線で文章が書けるようになりたい

Wordpressサイトのカスタマイズ
●憧れのサイトのようにしてみたい
●不具合を修正したい
●デザインを理想通りに変更したい

少しでも当てはまる項目があるなら、いつでもお気軽にご相談くださいませ。 ココナラ満足度100%で、提案力には自信があります!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です