jQuery：实现网页滚动时动态更新内容

      用过 Google Reader 的人都会发觉，当我们阅读的时候，浏览器的滚动条到达底端，新的内容会自动更新到网页的底端。或者看看这个示例，会有更清晰的了解：http://www.webresourcesdepot.com/dnspinger/

注：将上面示例的网页滚动到底端就会看到效果。

      下面，将用 jQuery 来简单实现这个有趣的效果。

      我们将更新的内容放于 Divs 内，下面是其结构：

<div class=”wrdLatest” id=9>content</div>
<div class=”wrdLatest” id=8>content</div>
<div id=”lastPostsLoader”></div>

      下面创建的 lastPostFunc 方法，使用 ajax 向服务器发送一个更新内容的请求，同时将最后一个 Div 的 id 传递过去，并且放置一个“正在加载”的图片。

function lastPostFunc()
{
    $(’div#lastPostsLoader’).html(’<img src=”bigLoader.gif”>’);
    $.post(“scroll.asp?action=getLastPosts&lastID=” + $(“.wrdLatest:last”).attr(“id”),   

    function(data){
        if (data != “”) {
        $(“.wrdLatest:last”).after(data);          
        }
        $(’div#lastPostsLoader’).empty();
    });
};

      当用户滚动网页到底端就会触发 lastPostFunc 方法：

$(window).scroll(function(){
        if  ($(window).scrollTop() == $(document).height() – $(window).height()){
           lastPostFunc();
        }
});

注意：代码中使用到 jQuery 的 Dimensions 插件，或者使用 jQuery 1.2.6+，因为已集成了该插件。

• 参考资料：http://www.webresourcesdepot.com/load-content-while-scrolling-with-jquery/