I am creating a blog on django/webfaction. My hompage currently displays 4 posts by default (posts are limited to 4 on queryset
in urls.py
). Now I woul
If you want to load your content on reaching extreme bottom of document use following code:
$(window).scroll(function()
{
if($(window).scrollTop() == $(document).height() - $(window).height())
{
// load your content
}
});
If you want to load content before reaching 100 pixel of bottom use
var loading= false;
$(window).scroll(function() {
if (!loading && ($(window).scrollTop() > $(document).height() - $(window).height() - 100)) {
loading= true;
// your content loading call goes here.
loading = false; // reset value of loading once content loaded
}
});
You can try something like this..
var processScroll = true;
$(window).scroll(function() {
if (processScroll && $(window).scrollTop() > $(document).height() - $(window).height() - 100) {
processScroll = false;
// your functionality here
processScroll = true;
}
});
You can make Ajax call to fetch more posts on 'onscroll' event of element (possibly on body in your case). You can make the same call using jquery's '.scroll()' documented here: http://api.jquery.com/scroll/
You can probably maintain a previous-top statement to determine direction of current scroll.