[チュートリアル]jQueryでページの所定位置まで来たら要素表示 via could

長谷川恭久(@yhassy)さんのブログcouldで使用されているscriptがよかったので紹介します。
なお、コンテンツも非常に読み応えがあるので、購読をお勧めします。
さて、couldでは、記事詳細を読み進め、ある位置までくると上からソーシャルブックマーク系が降りてきます。
記事後半まで読んでくれた意欲の高い人に対しアピールが出来、ソーシャルメディア上の伝播がより期待できます。
購入ボタンやお問合せボタンなどを置いてもいいかもしれません。
わりとシンプルな記述なので、苦労なく導入できると思います。
[チュートリアル]jQueryでページの所定位置まで来たら要素表示 via 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%;
}

※背景色などはお好みで指定下さい。

[チュートリアル]jQueryでページの所定位置まで来たら要素表示 via could サンプル

sponsors

「[チュートリアル]jQueryでページの所定位置まで来たら要素表示 via could」をシェアする

記事作成:
記事URL:

TOP > > > [チュートリアル]jQueryでページの所定位置まで来たら要素表示 via could