Written by Manabu Bannai

スクロールしたらサイドバー固定するコピペ用スクリプト【jQuery利用】

JavaScript PROGRAMMING

今どきのフロントエンドエンジニアはサイドバーを固定したいと思います。ブログとかでもよく使われている手法ですよね。
デモ:» スクロールでサイドバー固定するデモ

それでググっていたら以下のスクリプトにたどり着きました。
» ライブドアみたいにスクロールしたらサイドバーの広告を固定する – ぼくはまちちゃん!(Hatena)

たしかに動くのですが「コード長すぎじゃないか!」と思ったので、もっとスッキリしたコードを配布します。jQueryを利用するので、しっかり読み込んでおいてください。

サイドバー固定のJavaScriptテンプレート

// 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);

サイドバー固定のHTMLテンプレート

<!DOCTYPE HTML>
<html lang="ja">
<head>
	<meta charset="utf-8" />
	<title>空っぽのHTMLフレーム</title>

	// jQuery読み込み
	<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

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

<footer>
</footer>
 
</body>
</html>

サイドバー固定のCSSテンプレート

CSSはサイトに応じて調整してください。

.pc-side-nav-fixed {
	top: 2%;
	left: 68%;
	width: 18%;
	position: fixed;
}

以上で完成です。
らくちんすぎるっ!!

人気記事:Web制作の独学方法をガッツリまとめました。

» 【独学でWeb制作マスター】勉強方法のまとめ【初心者向け】

おすすめ:Webで稼ぎたいなら、Webマーケティングを学びましょう。ノウハウまとめました。

» 【超初心者向け】Web集客の基礎から応用までガッツリまとめました。