色々なホームページでよく見かける、"ページのスクロールに合わせて付いてくるサイドバー" を実装する方法について紹介します！(Ggoogle Chrome, IE11動作確認)
具体的にどんな感じになるかについては、PC表示にしてこのページのサイドバーに注目しながらページを下の方に スクロールしてみてください。 スクロールすると、それに合わせて一緒についてくると思います。
① Jqueryプラグインのダウンロード
この機能を実装するためにはJqueryの「Sticky」というプラグインを導入する必要があります。手順自体はとても簡単 なのでご安心を！
「Jquery Sticky」のダウンロードサイト(←クリックで移動)に入り、 黄色の「Download Plugin」というボタンを押して、「garand-sticky-1.0.1-18-g48d4464.zip」というフォルダをダウンロードしてください。
ダウンロードした.zipを開いていくと、「jquery.sticky.js」というファイルがあるので、 このファイルのみをホームページのディレクトリに配置しておいてください。これがプラグイン本体となります。
② プラグインの呼び出し(HTML記述)
次はダウンロードしたプラグインを呼び出す行を追加します。
この機能を実装したいページのHTMLを開き、＜head＞＜/head＞内に以下の行を追加してください。
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.sticky.js"></script>
<script>
$(window).load(function(){
$("#sticker").sticky({ topSpacing: 30, center:true, className:"hey" });
});
</script>
※ 2行目は自身が「jquery.sticky.js」を置いた場所のパスを選択してください。
そしたら最後に、動かしたいサイドバーの部分を＜div＞＜/div＞で囲み、
↑のコードの青色部分と同じ属性を付与してください。
例：
※ このとき、属性の名前は "sticker" でなくても構いません。また、id属性でなくclass属性を与えたい場合は、 ＜head＞内のコードの"#sticker"を".sticker"に変更すればOKです。
以上で導入手順は終了です。プラグインをサーバーにアップロードし、きちんと付いてくるようになっているかを 確認してみてください
これはサイドのスペースが空いてしまった時なんかに便利ですね！ただしあまり使いすぎると 鬱陶しく思われてしまうかもしれないのでご注意を！！
