javascript/jquery detect user scroll 200px from bottom of page

[shortysbest]

I have a page that loads older comments when you scroll to the bottom of the page, it works well however I want it to load the comments when the user has scrolled to around 200px up from the bottom of the page (so they have a chance to load to help keep the user scrolling down smoothly without breaks from it loading).

 

currently using:

 

$(window).scroll(function () {
               /*  if ($win.scrollTop() == 0)
                    ///scrolled to page top*/
if ($(window).height() + $(window).scrollTop() == $(document).height()) {
//code to be executed
}
});

[Adam]

Almost there. You just forgot to subtract the target distance from the bottom, from the height of the document:

 

[...] >= $(document).height() - 200) {

 

Also I change the operator to "more than or equal" - as you most likely won't hit the 200px mark exactly.

 

Once this expression evaluates to true I'd also .unbind() the event, so the browser doesn't try loading the comments multiple times.

[shortysbest]

Yeah it loads them multiple times because it doesn't have the last id loaded when you're near the bottom of the page. I'm not that familiar with the unbind function so.

 

$(function () {
var last_id = null
$(window).scroll(function () {
if ($(window).height() + $(window).scrollTop() >= $(document).height()-100) {
if(get('id'))
{
var id = get('id');	
}
else
{
var id = '';	
}
var f_post_id = $(".stream li:last").attr('id');
if(stream_loaded)
{ 
$.ajax({
        type: "POST",
        url: "ajax/load_old_posts.php",
        data: "id="+id+"&post_id="+f_post_id,
        cache: false,
        success: function(data) {
var check_data = data.replace(/^\s+|\s+$/g, '');
if(check_data)
{
          $(".stream li:last").after(data);
  $(".stream li").fadeIn("slow");	  
        }
}
      });
}
});
});

[Adam]

Much easier to read indented.. but anyway this is how you'd unbind the event:

 

// bind the scroll event here to the function expression
$(window).scroll(function () {
    // check if we've scrolled to the last 100px
    if ($(window).height() + $(window).scrollTop() >= $(document).height()-100) {
        // unbind the scroll event so we don't come here again
        $(window).unbind('scroll');

[shortysbest]

The way my comments are loaded in are after by increments of 5. so every time you scroll to the bottom, or -150 px from the bottom it would load the next 5 until there are no more, I haven't tried the code but it must make it so you can only load comments once, so in that case it would only load the next 5, and if there are more than that to be loaded they wouldn't load again.

[shortysbest]

disregard the last message, I've got everything working well except for one thing. My website is primarily hash based, so when i am using the $(window).unbind('scroll') it doesn't work for other pages that use this code to load more comments, so I need to rebind the scroll event to window when hash changes, like:

 

$(window).hashchange(function(){	

$(window).bind('scroll');

});

 

However that doesn't work. The code I ended up using for loading comments is:

 

var finished = true;
///////////////////
$(function () {
$(window).scroll(function () {
if ($(window).height() + $(window).scrollTop() >= $(document).height()-135) {
loading();
if(finished)
{
finished = null;
if(get('id'))
{
var id = get('id');	
}
else
{
var id = '';	
}
var f_post_id = $(".stream li:last").attr('id');

if(stream_loaded)
{

$.ajax({
        type: "POST",
        url: "ajax/load_old_posts.php",
        data: "id="+id+"&post_id="+f_post_id,
        cache: false,
        success: function(data) {

	var check_data = data.replace(/^\s+|\s+$/g, '');
	if(check_data)
	  {
          $(".stream li:last").after(data);
	  $(".stream li").fadeIn("slow");
	  }
	 var lpostid = $(".stream li:last").attr('id');
	if(last_id==lpostid)
	{
		$(window).unbind('scroll');
	}
	finished = true;
	end_loading();
	}

      });  

}
}}
});
});

 

pardon the mound of code. Again thank you very much for your assistance!

[markjoe]

Careful MrAdam, if you bind an anonymous function, there is no way to unbind it without unbinding everything else.

http://www.phpfreaks.com/forums/index.php?topic=330223.0

[Adam]

Careful MrAdam, if you bind an anonymous function, there is no way to unbind it without unbinding everything else.

 

You can use:

 

$(window).unbind('scroll', arguments.callee);