こんにちは!このブログを作って2ヶ月が経ちました(^^)
少し間が空きましたが、サイト制作日記を書いてみます!
今回は2chまとめサイトにありがちなスクロールするとサイドバーの広告が追いかけてくるようなものを作ってみました。
まとめ記事じゃなくて申し訳ありません(>_<)たまーーーに。ほんとたまーーーーーに、こんなサイト制作日記たるものを書いちゃいます。ご容赦くださいm(__)m

何のことだ?って人は当ブログの右サイドバーを見てください。Amazonの広告が追いかけてくるはずです。
これ難しそうに見えて、めちゃくちゃ簡単に実装できるので是非ここでコードを盗っていってください(^^)

jqueryを使う

簡単に実装するためにjqueryを使います!jqueryとはjavascriptライブラリです(^^)
このjqueryを使うためには下準備が必要になります。

本家のhttp://jquery.com/からダウンロードしてくるか、Googleが置いているURLを指定して使うのが一般的です。めんどくさい場合はGoogleのURLでいいと思います(^^)

GoogleのURLを利用する場合は書きのコードをhead内に書いてあげます!

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

livedoorブログの場合はメニューから書くこともできます

0613

これで下準備は完了です(^^)

バシバシ書くよーー

長くなりそうなので書いていきます!(拾い物を説明してるだけなので書いてないですがw)

<script type="text/javascript">
jQuery(function($) {
 
var nav = $('#scroll'),
    offset = nav.offset();
 
$(window).scroll(function () {
  if($(window).scrollTop() > offset.top - 10) {
    nav.addClass('fixed');
  } else {
    nav.removeClass('fixed');
  }
});
 
});
</script>

上記の「#scroll」は各ブログの次第です。動かしたい場所のID,クラス名にしたがってください。
例えば

<div class="aiueo">
 
広告
 
</div>

という場合だったら「.aiueo」にします。
IDはシャープ
classはどっとです

何をしているのか簡単に説明します!
ID、scroll(#scroll)が上まで10の時点に達したら、これをfixedというクラス名に変えちゃう!というコードです。
厳密にはクラス名を追加しているのですが、CSSでは「.fixed」が反映されることになるので「変える」みたな覚え方がしっくりくるかと思います!
だからaddClassは何でもOK。(←追加するクラス名fixedじゃなくてもお好みで)は好きな文字を記入して大丈夫です(それに合わせてCSSも変えますが)

ということで、下までscrollされたら

<!--id(#)だった場合 -->
<div id="scroll" class="fixed">
 
広告
 
</div>
 
<!-- class(.)だった場合 -->
<div class="scroll fixed">
 
広告
 
</div>

になっているということになりますということで、それ用のCSSも記述して上げます!
おっとその前に、、、
これをどこに記述するかですよね。どこでも大丈夫です!headでもbodyでも!
ただjavascriptは読み込みに時間がかかるので、body閉じタグの直前に書くのがいいんじゃないかなと思います。
そうすれば閲覧者にストレスフリーな環境を作りやすくなるかなと、、、
headに書けよばかたれ!って言う人も居ますが、現在の場合だとheadに書かなきゃいけないなんてことはありません。
サイトのスピード維持のためにも、htmlを読み終わった後にjavascriptの読み込みの方がGOOD

CSSはお好みで

.fixed {
  position: fixed;
  top: 20px;
}

こんな感じにしています。「 position: fixed」は絶対位置なのでmarginなどで指定できないのが難点ですが、、、top、rightなどで調整してみてください(^^)

最後に
たくさんのアンテナサイト様、まとめブログ様に相互してもらうことができました。
本当に感謝しております。ありがとうございますm(__)m