超簡単！1分でサイドメニューの広告部分などをスクロールの途中で止めるFIXさせる方法

最近LIGさんや色んなサイトを見ていて、
これいいな～と思ったのが、

サイドコンテンツがスクロール途中で、FIXになり途中で止まるので、
広告や、常に見せたいコンテンツが消えずにずっと見えるのです。

これが、超簡単に出来るので、
メモ書きしておきます！！

●まず、jqueryがいるので、以下をheader部分に記載してください！

<script src="//code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>

●次に、途中で表示を固定させたいサイドのコンテンツ部分を、
何でもいいので、
<div id=””>コンテンツの中身</div>
で囲ってください。

（例）
※例では、Wordpress（ワードプレス）のサイドバーが表示される部分をfixedNaviというID名をつけて囲みました！

<div id="fixedNavi">
<?php
 dynamic_sidebar( 'sidebar' );
?>
</div>

●あとは、フッター部分に、以下を入れてください！

<script type="text/javascript">

 // ページの読み込みが完了してから実行
 $(function() {

 // 途中から固定したいボックスの情報を得る
 var navBox = $("#fixedNavi");
 var navOst = navBox.offset().top;

 // スクロールされた際に実行
 $(window).scroll( function() {
 // 現在のスクロール位置と、固定したいボックスの位置を比較
 if( $(window).scrollTop() > navOst ) {
 // 固定用のclassを付加
 navBox.addClass("fixBox");
 }
 else {
 // 固定用のclassを削除
 navBox.removeClass("fixBox");
 }
 });

 });
</script>

ワードプレスや、賢威で作っている人でも簡単にできますよ！！