Javascript ページ下部にいくと新たに商品が現れる

Question

初めまして、Javascriptにとても苦戦しております。
現在、色んなサイトを見てここまでJavascriptを書いています。
これは、JSONファイルを読み込み商品を表示させるものです。
しかし、ページの一番下までいかないと次の48件が読み込む事が出来ません。

今教えていただきたいのは、一番下までいかなくても商品が出てくるような仕組みにしたいと考えています。

例えば下から300pxの所で新しい商品を表示させる事ができれば
一番嬉しいです。

お手数お掛け致しますが、ご教示いただければと思います。
宜しくお願い致します。

-----ここからソース------------------

$(function(){
var setArea = $('#loadarea'),
loadNum = 48, // 読み込む個数
loadTxt = '', // Loading中の表示テキスト
fadeSpeed = 500; // フェードスピード

$(window).load(function(){
	var adjScrTop = $(document).scrollTop();
		$('html,body').animate({scrollTop:(adjScrTop)-1},0);
		$.ajax({
			url: '/js/itemlist.json',
			dataType: 'json',
			success : function(data){
				var dataLengh = data.length,
				loadItemLength = setArea.find('.loadItem').length,
				setAdj = (dataLengh)-(loadItemLength),
				setBeg = (dataLengh)-(setAdj);
				if(!(dataLengh == loadItemLength)){
					setArea.append('<div id="nowLoading">' + loadTxt + '</div>');
					if(loadItemLength == 0){
						for (var i=0; i<loadNum; i++) {
							$('<div class="loadItem col-xs-4 col-sm-3" id="item' + data[i].itemNum + '"><p class="item_image"><a href="' + data[i].item_url + '"><img src="' + data[i].item_pict + '" alt="' + data[i].item_name + '"></a><img src="images/' + data[i].classification + '.png" class="new_m"></p><p class="item_name"><a href="' + data[i].item_url + '">' + data[i].item_name + '</a></p></div>').appendTo(setArea).css({opacity:'0'}).animate({opacity:'1'},fadeSpeed);
						}
					} else if(loadItemLength > 0 && loadItemLength < dataLengh){
						if(loadNum < setAdj){
							for (var i=0; i<loadNum; i++) {
								v = i+setBeg;
								$('<div class="loadItem col-xs-4 col-sm-3" id="item' + data[v].itemNum + '"><p class="item_image"><a href="' + data[v].item_url + '"><img src="' + data[v].item_pict + '" alt="' + data[v].item_name + '"></a><img src="images/' + data[v].classification + '.png" class="new_m"></p><p class="item_name"><a href="' + data[v].item_url + '">' + data[v].item_name + '</a></p></div>').appendTo(setArea).css({opacity:'0'}).animate({opacity:'1'},fadeSpeed);
							}
						} else if(loadNum >= setAdj){
							for (var i=0; i<setAdj; i++) {
								v = i+setBeg;
								$('<div class="loadItem col-xs-4 col-sm-3" id="item' + data[v].itemNum + '"><p class="item_image"><a href="' + data[v].item_url + '"><img src="' + data[v].item_pict + '" alt="' + data[v].item_name + '"></a><img src="images/' + data[v].classification + '.png" class="new_m"></p><p class="item_name"><a href="' + data[v].item_url + '">' + data[v].item_name + '</a></p></div>').appendTo(setArea).css({opacity:'0'}).animate({opacity:'1'},fadeSpeed);
							}
						}
					} else if(loadItemLength == dataLengh){
						return false;
					}
				} else {
					return false;
				}
			},
			complete : function(){
				$('#nowLoading').each(function(){
					$(this).remove();
				});
				return false;
			}
		});
}).scroll(function(){
	scrollLoad();
});

function scrollLoad(){
	var winHeight = window.innerHeight ? window.innerHeight : $(window).height(),
	posBottom = $(document).height() - winHeight;
	if($(this).scrollTop() == posBottom) {
		var adjScrTop = $(document).scrollTop();
		$('html,body').animate({scrollTop:(adjScrTop)-1},0);
		$.ajax({
			url: 'js/itemlist.json',
			dataType: 'json',
			success : function(data){
				var dataLengh = data.length,
				loadItemLength = setArea.find('.loadItem').length,
				setAdj = (dataLengh)-(loadItemLength),
				setBeg = (dataLengh)-(setAdj);
				if(!(dataLengh == loadItemLength)){
					setArea.append('<div id="nowLoading">' + loadTxt + '</div>');
					if(loadItemLength == 0){
						for (var i=0; i<loadNum; i++) {
							$('<div class="loadItem col-xs-4 col-sm-3" id="item' + data[i].itemNum + '"><p class="item_image"><a href="' + data[i].item_url + '"><img src="' + data[i].item_pict + '" alt="' + data[i].item_name + '"></a><img src="images/' + data[i].classification + '.png" class="new_m"></p><p class="item_name"><a href="' + data[i].item_url + '">' + data[i].item_name + '</a></p></div>').appendTo(setArea).css({opacity:'0'}).animate({opacity:'1'},fadeSpeed);
						}
					} else if(loadItemLength > 0 && loadItemLength < dataLengh){
						if(loadNum < setAdj){
							for (var i=0; i<loadNum; i++) {
								v = i+setBeg;
								$('<div class="loadItem col-xs-4 col-sm-3" id="item' + data[v].itemNum + '"><p class="item_image"><a href="' + data[v].item_url + '"><img src="' + data[v].item_pict + '" alt="' + data[v].item_name + '"></a><img src="images/' + data[v].classification + '.png" class="new_m"></p><p class="item_name"><a href="' + data[v].item_url + '">' + data[v].item_name + '</a></p></div>').appendTo(setArea).css({opacity:'0'}).animate({opacity:'1'},fadeSpeed);
							}
						} else if(loadNum >= setAdj){
							for (var i=0; i<setAdj; i++) {
								v = i+setBeg;
								$('<div class="loadItem col-xs-4 col-sm-3" id="item' + data[v].itemNum + '"><p class="item_image"><a href="' + data[v].item_url + '"><img src="' + data[v].item_pict + '" alt="' + data[v].item_name + '"></a><img src="images/' + data[v].classification + '.png" class="new_m"></p><p class="item_name"><a href="' + data[v].item_url + '">' + data[v].item_name + '</a></p></div>').appendTo(setArea).css({opacity:'0'}).animate({opacity:'1'},fadeSpeed);
							}
						}
					} else if(loadItemLength == dataLengh){
						return false;
					}
				} else {
					return false;
				}
			},
			complete : function(){
				$('#nowLoading').each(function(){
					$(this).remove();
				});
				
				return false;
			}
		});
		return false;
		
	}
}

});

Answer 1

scrollload の3行目の if 文を説明できますか。

Comments

[isseidayo]

ご回答ありがとうございました。
以下の部分ですが、
if($(this).scrollTop() == posBottom)
はっきり説明する事ができません。
申し訳ございません。