スクロールしたらサイドバー固定するコピペ用スクリプト【jQuery利用】
今どきのフロントエンドエンジニアはサイドバーを固定したいと思います。ブログとかでもよく使われている手法ですよね。
デモ：» スクロールでサイドバー固定するデモ
それでググっていたら以下のスクリプトにたどり着きました。
» ライブドアみたいにスクロールしたらサイドバーの広告を固定する – ぼくはまちちゃん！(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;
}以上で完成です。
らくちんすぎるっ！！
※P.S：無料メルマガで発信中：過去の僕は「ブログ発信で５億円」を稼ぎました。次は「30億円」を目指します。挑戦しつつ、裏側の思考を「メルマガ」から発信します。不満足なら１秒で解約できます。無料登録は「こちら」です。