[チュートリアル]jQueryでページの所定位置まで来たら要素表示 via could
長谷川恭久（@yhassy）さんのブログcouldで使用されているscriptがよかったので紹介します。
なお、コンテンツも非常に読み応えがあるので、購読をお勧めします。
さて、couldでは、記事詳細を読み進め、ある位置までくると上からソーシャルブックマーク系が降りてきます。
記事後半まで読んでくれた意欲の高い人に対しアピールが出来、ソーシャルメディア上の伝播がより期待できます。
購入ボタンやお問合せボタンなどを置いてもいいかもしれません。
シンプルな記述なので、苦労なく導入できると思います。
使用方法
jQueryからjquery.jsをダウンロードします。
■JavaScriptの記述
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script>
$(function(){
$(window).scroll(function(){
// id2までの高さを取得
var distanceTop = $('#id2').offset().top - $(window).height();
// id2に達しているかどうかを判別
if ($(window).scrollTop() > distanceTop)
// してれば、id1をtop0pxに200ミリ秒かけて移動させる
$('#id1').animate({'top':'0px'},200);
else
//していなければば、id1をtopから-105pxに100ミリ秒かけて移動
$('#id1').stop(true).animate({'top':'-105px'},100);
});
//クラスcloseが付与されているものをクリックしたらその親要素を削除
$('#id1 .close').bind('click',function(){
$(this).parent().remove();
});
});
</script>
■HTMLの記述
表示させたいものをid1内に、到達したら表示させたい場所にid2を付与します。
▼上部に表示させるコンテンツ
<div id="id1"
ここになんか書きましょう
<p class="close">×</p>
</div>
▼ここに到達したら出す！っていうところ
<div id="id2">
idをフッターとかにしておくといいかもです。
</div>
■CSSの記述
最後に表示させるid1のデザインや位置を調整します。
今回-105pxにしているので、下記の値も105pxにしています。
#id1{
height:105px;
left: 0;
position:fixed;
top:-105px;
width: 100%;
}
※背景色などはお好みで指定下さい。
サンプル
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓