Scroll down, ajax load more in another div

I haven't seen this开发者_开发问答 done anywhere before but I hope y'all geniuses here can help out. I have a very tall div which users will have to scroll to read more. I also have a div to it's top right which loads google ads. I want this div to load more ads based on the scroll level of the user.

I hope I am quite clear. If not, please check http://jsfiddle.net/NWgQx/ for a picture of what I mean.

Thanx in advance.

You could do something similar to:

$(window).scroll(function() {
    var top = $(document).scrollTop();
    var ad_offset = $('#ad').offset();
    var ad_bottom = ad_offset.top + $('#ad').height();
    if (top > ad_bottom) {
        $('#more-ads').load('/more-ads.html');
    }
});

I'm not a huge fan of binding on the scroll event, I think it's really slow. This might give you some ideas though. You should probably also set a variable to indicate whether or not more ads are currently loading and stop listening to the scroll event until more ads have been loaded.