スクロールしてもついてくる（position:absolute;)

★　スクロールしてもついてくる（絶対配置（position:absolute;）)


●　絶対配置には、position:absolute;　と　position:fixed; があります。
position:fixed;　の場合は、スクロールすると一緒についてきますが、
position:absolute; の場合は、ついてきません。
position:absolute;　の場合もついてくる様にするスクリプトの紹介です。


どこかのブログランキングサイトで、ちょろちょろ　と言っていたようです。



●　このブログの左側に設置しているのを参照してください

画像は下記













①　フリースペース又は、フリープラグインへ追記する（リンクしない画像の場合）

<div id="TB01" style="position:absolute;z-index:7000;top:100px;left:800px;"><img src="画像のＵＲＬ"></div>

②　フリースペース又は、フリープラグインへ追記する（リンクする画像の場合）

<div id="TB01" style="position:absolute;z-index:7000;top:100px;left:800px;"><a href="リンク先のＵＲＬ" target="_blank"><img src="画像のＵＲＬ"></a></div>

③　フリープラグインへ下記スクリプトを追記する

★　間違えがありました。
t2=t2.substring(0,t2.indexOf("px",1)-2);→t2=t2.substring(0,t2.indexOf("px",1));に
変えました。

<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
<script type='text/javascript'>
s="#TB01";var t1xx;sp="normal";
$(function() {
var t2=$(s).css("top");
t2=t2.substring(0,t2.indexOf("px",1));
 t1xx=parseInt(t2);
var y = $(window).scrollTop();
var y1=t1xx+y;$(s).css("top",y1+"px");
});
$(function() {
$(window).scroll(function(){
var y = $(this).scrollTop();
var y1=t1xx+y;
$(s).animate({top:y1+"px"},{duration: sp,complete: function(){
$(s).css("top",y1+"px");}})
})})
</script>

　◆　説明

　　　・　下記はフリープラグインに１つあればＯＫです。

<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>



　　　・　sp="normal";　・・・　早さを指定します。下記の様に　slow normal fast 又は、ミリ秒でも
　　　　指定できます。早さは調整してください。

　　　　　slow ・・・　遅い　normal ・・・　普通　fast　・・・　早い
　　　　　1000 ・・・　１秒　1000　・・・　0.1秒

　　　・　s="#TB01";　・・・　①、②　で指定した名前(id)を指定します。


　　　注意：このスクリプトでコントロールできる画像は１つです。



●　その他


①　フリープラグインの文字数制限を回避するためにパック（圧縮）したのは
　　下記です。（フリープラグインへ追記）

<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
<script type='text/javascript'>
s="#TB01";var t1xx;sp="1000";
$(function(){var t2=$(s).css("top");t2=t2.substring(0,t2.indexOf("px",1));t1xx=parseInt(t2);var y=$(window).scrollTop();var y1=t1xx+y;$(s).css("top",y1+"px");});$(function(){$(window).scroll(function(){var y=$(this).scrollTop();var y1=t1xx+y;$(s).animate({top:y1+"px"},{duration:sp,complete:function(){$(s).css("top",y1+"px")}})})})
</script>

●　スクリプト作成メモ

①　jQueryのanimateを使っていますが、使わないと、safariやクロームのブラウザでは、
　　スクロールすると、画像が点滅して移動して、汚くなります。
　　それを回避するため、animate を使いました。

②　スクリプト内容

Ａ　画像のtopの位置を事前に得ます。（ＣＳＳの内容を得る）
Ｂ　スクロールがされたとき、そのスクロール量を得て、Ａで得た値に加算します。
Ｃ　jQueryのanimateで、画像の縦の位置を指定された時間をかけて、移動します。
　　移動を完了した時点で、ＣＳＳで縦の位置を変えます。（位置確定）




★　追記　2012.07.16

◆　変更点

①　スクリプトを簡素化（ライブラリ（書庫）にいれたため）
②　３個まで指定可能にしました。


◆　１つのみ指定の場合

①　フリープラグインへ追記する

<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
<script type='text/javascript' src='http://usrcss.ameblo.jp/skin/templates/6d/7d/10030757386.css'></script>
<script type='text/javascript'>
var t1;
$(document).ready(function(){
choro("#TB01","normal");
})
</script>

●　説明

・　下記はフリープラグインの最初に１つあればＯＫです。

<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>

・　下記choro(セレクタ名,スピード）;
は、フリープラグインに１つあればＯＫで　・・・・ var t1; を指定すること。
す。（ライブラリ）

<script type='text/javascript' src='http://usrcss.ameblo.jp/skin/templates/6d/7d/10030757386.css'></script>

・　t1 は、グローバル関数です。

・　#TB01 は、セレクタ名です。

・ normal は、スピードです。（既に説明している部分を参照）

・　choroは関数。３個使えます。

choro(セレクタ名,スピード）;　・・・・ var t1; を指定すること。
choro2(セレクタ名,スピード）;　・・・・ var t12; を指定すること。
choro3(セレクタ名,スピード）;　・・・・ var t13; を指定すること。




◆　２つの場合

①　下記をフリープラグインへ追記する

<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
<script type='text/javascript' src='http://usrcss.ameblo.jp/skin/templates/6d/7d/10030757386.css'></script>
<script type='text/javascript'>
var t1;var t12;
$(document).ready(function(){
choro("#TB01","normal");
choro2("#TB02","normal");
})
</script>

◆　３つの場合

①　下記をフリープラグインへ追記する

<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
<script type='text/javascript' src='http://usrcss.ameblo.jp/skin/templates/6d/7d/10030757386.css'></script>
<script type='text/javascript'>
var t1;var t12;var t13;
$(document).ready(function(){
choro("#TB01","normal");
choro2("#TB02","normal");
choro3("#TB03","normal");
})
</script>