Ajax loader on scroll

I'm using the following code to load in new wordpress posts on click of a category or "Show more"

This is working fine, but I want to replace the 'bloc-load' click action with it automatically loading when scrolling to the bottom of the page.

 
var page = 1; 
var loading = true; 
var root="http://www.example.com/";
var cat = "home"; 

$("body").delegate("#bloc-load","click", function() {
	console.log("loading more...");
	loading = true;  
	page++;  
	load_posts(16,page,cat);  
});

$("body").delegate("#bloc-menu a","click", function () {
	cat = $(this).text().toLowerCase();
	var url = document.URL;
	if(window.location.hash) {
		url = url.substr(0,url.indexOf("#"));
	}
	console.log(url);
	if(url!=root){
		window.location=root+"#"+cat;
	} else {
	window.location.hash=cat;
	console.log("loading "+cat+"...");
	loading = true;  
	page=1;  
	load_posts(16,page,cat);  
	}
	return false;
});
	

function load_posts(n,p,c){  
	console.log("loading posts - "+n+", "+p+", "+c); 
	var $window = $(window);  
	var $content = $("body.blog #home-arts"); 
	if(n==16){
	console.log("reset content...");
	}
	$.ajax({  
		type       : "GET",  
		data       : {numPosts : n, pageNumber: p, cat: c},  
		dataType   : "html",  
		url        : "http://www.example.com/wp-content/themes/example/ajaxlooper.php",  
		beforeSend : function(){  
			if(page != 1){  
				$content.append('<div id="bloc-loader">Loading...</div>');  
			}  
		},  
		success    : function(data){  
			$data = $(data);  
			//console.log($data);
			if($data.length){
				console.log("appending...");  
				$data.hide();  
				if(page == 1){
					$content.html("");
				}
				$content.append($data);  
				$data.fadeIn(500, function(){  
					$("#bloc-loader").remove();  
					loading = false;  
				});  
			} else {  
				$("#bloc-loader").remove();  
			}  
		},  
		error     : function(jqXHR, textStatus, errorThrown) {  
			$("#bloc-loader").remove();  
			alert(jqXHR + " :: " + textStatus + " :: " + errorThrown);  
		}  
  	});  
}

$(function () {
	if(document.URL!=root) {
		cat=window.location.hash;
	}
	console.log("loading...");
	load_posts(16,page,cat);  
});

I did think this would work:

$window.scroll(function() {  
	var content_offset = $content.offset();  
	console.log(content_offset.top);  
	if(!loading && ($window.scrollTop() +  
		$window.height()) > ($content.scrollTop() +  
		$content.height() + content_offset.top)) {  
			console.log("loading more...");
			loading = true;  
			page++;  
			load_posts(16,page,cat);
	}  
});  

But nope....Any ideas?