jQuery looking for scroll height code to determine when to add new items to lazy loading scrollable div [jsFiddle attached]

I have a large array of items that I render with jQuery templates. I want to render 50 or so at a time, and show more when the user scrolls down. I'm trying to find the correct logic on working with the scroll bar. I am doing something like this, but the scrolling is still a bit wonky:

var listItems = this.buildItemList(this.list, regex);    
        var renderItems = this.renderItems;
        renderItems(listItems, wrapper, 50);                    
        wrapper.scroll(function() {
            // This works, but doesn't work quite right. Looks a bit wonky.
            if (wrapper.scrollTop() > .5 * wrapper.children().length * wrapper.children().first().outerHeight())
            {
                renderItems(listItems, wrapper, 30);
            }
        });         开发者_StackOverflow 

View this jsFiddle I wrote, it's a great example of what I need.

http://jsfiddle.net/8rWTg/32/

Here's what's not working for me. I want to items to get added when you're about 80% through the list, however, with the logic I made, it happens at varying points depending on the number of items in the list, and between browsers.

So something similar to Imgur's album? If you look at their code, they have a function called _levelReached which is probably similar to what you want.