こんにちは！このブログを作って2ヶ月が経ちました(^^)
少し間が空きましたが、サイト制作日記を書いてみます！
今回は２ｃｈまとめサイトにありがちなスクロールするとサイドバーの広告が追いかけてくるようなものを作ってみました。
まとめ記事じゃなくて申し訳ありません(>_<)たまーーーに。ほんとたまーーーーーに、こんなサイト制作日記たるものを書いちゃいます。ご容赦くださいm(__)m
何のことだ？って人は当ブログの右サイドバーを見てください。Amazonの広告が追いかけてくるはずです。
これ難しそうに見えて、めちゃくちゃ簡単に実装できるので是非ここでコードを盗っていってください(^^)
jqueryを使う
簡単に実装するためにjqueryを使います！jqueryとはjavascriptライブラリです(^^)
このjqueryを使うためには下準備が必要になります。
本家のhttp://jquery.com/からダウンロードしてくるか、Googleが置いているURLを指定して使うのが一般的です。めんどくさい場合はGoogleのURLでいいと思います(^^)
GoogleのURLを利用する場合は書きのコードをhead内に書いてあげます！
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
livedoorブログの場合はメニューから書くこともできます
これで下準備は完了です(^^)
バシバシ書くよーー
長くなりそうなので書いていきます！（拾い物を説明してるだけなので書いてないですがｗ）
<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