へんな柳生

無限スクロールの仕組みを調べている中で、jQueryを使って汎用性の高そうな動作が意外と簡単に実装できることがわかったのでメモ。

ページ内のある要素が、スクロールされて表示されたときになんらかの命令を実行するJavaScript。

$(function() {
	// 引き金となる要素を設定
	var triggerNode = $(".trigger");
	// 画面スクロール毎に判定を行う
	$(window).scroll(function(){
		// 引き金となる要素の位置を取得
		var triggerNodePosition = $(triggerNode).offset().top - $(window).height();	
		// 現在のスクロール位置が引き金要素の位置より下にあれば‥
		if ($(window).scrollTop() > triggerNodePosition) {
			// なんらかの命令を実行
			console.debug("Do Something");
		}
	});
});

ページのフッターが表示されたときに、そのフッターの上に画像とか文字とか、要素を追加する命令をすれば無限スクロールになるし、
記事を読み終わったタイミングでいいね！的なボタンを出すようなブログも作れるし、
いろいろ遊べそうな気がします。

if ($(window).scrollTop() > triggerNodePosition) {

の部分を

if ($(window).scrollTop() > triggerNodePosition - 30) {

とかに変えれば、ある要素が表示される少し前に命令を実行、なんて調整もできますね。