サンプルと概要
簡単な仕組みとしては、常にスクロール位置を監視(300ミリ秒に1回チェック)して、指定した要素が表示される部分までスクロールした時に、別の特定の要素を表示させます。
そしてそこからさらに下へスクロールしていくと、表示させた要素を隠します。
特定の要素が表示されたかどうかは、その要素が上から何pxの位置にあるかを取得、窓に表示されている領域は、現在のスクロール位置(上)に窓の高さ(下)を加えることで、取得しています。その要素が窓に表示されている領域に含まれれば、指定された要素を表示させます。
動作サンプルはこのブログの記事に設置してあるものを見てください。
このブログでは、記事の下部にあるコメント(#comments-area)がブラウザの描写領域内に表示された瞬間、ブックマークやつぶやきを促すコンテンツが表示されるようにしています。
2011年9月22日 3時頃追記
※WordpressのSyntax Highlighter for WordPressなど一部のプラグインを利用している環境で、IE8(WindowsXP)で正常に動作しないようです。原因わからず(´д`;
2011年9月22日 10時頃追記
※修正しました。一部プラグインのコンテンツ(今回の例だとSyntax Highlighter for WordPress)が表示されているページでjQueryのバージョンが変更された?か何かで高さの指定でエラーが出ていました。
2011年9月22日 17時頃追記
※修正しました。既存のJavaScriptによっては、トリガーとなる要素が移動してしまう場合もあるため、その位置も常に取得するように変更しました。
コード
$(function(){
/*
引数は左から
1. 要素1(これが画面に表示されれば2. を表示させる)
2. 要素2
3. 2.の高さ
4. 2.が表示された時のアニメーションの速度
5. 2.を隠すときのアニメーションの速度
6. 2.が表示された箇所から、ここで指定された幅だけ離れると見えなくする
*/
DelayVisibleContents("#comments-area", "#interview", 233, 1200, 320, 480);
});
var DelayVisibleContents = function(t, c, h, d1, d2, m){
var f = 0;
$(c).css({height: 0}).hide();
setInterval(function() {
var tPs = $(t).offset().top;
var wHt = $(window).height();
var bSc = $(this).scrollTop() + wHt;
if(f == 0 && (bSc > tPs && bSc - m < tPs)) {
f++;
$(c+":not(:animated)").css("display","block").animate({height:h+"px"},{"duration":d1,complete:function(){f++;}});
} else if(f >= 2 && (bSc <= tPs || bSc - m >= tPs)) {
f--;
$(c+":not(:animated)").animate({height:"toggle"},{"duration":d2,complete:function(){$(this).css({height: 0}).hide();f--;}});
}
}, 300);
}

Pingback: Wordpressで、jQuery使って、記事の終わりにオススメ記事をにゅっと表示させるやつを、オリジナルで作る方法 | しらさかブログ