jquery滚动条底部自动加载

$(function(){
    var totalHeight = 0; //定义一个总高度变量
    function ata(){ //loa动态加载数据
        totalHeight =  parseFloat( $(window).height() ) +  parseFloat( $(window).scrollTop() ); //浏览器的高度加上滚动条的高度
        if ( $(document).height() <= totalHeight ) { //当文档的高度小于或者等于总的高度时，开始动态加载数据
            $("#container").append("<p>我是新加载出来的数据</p>"); //加载数据
        }
    }
    $(window).scroll(function(){
        console.log("滚动条到顶部的垂直高度：" +  $(window).scrollTop() );
        console.log("页面的文档高度：" +  $(document).height() );
        console.log("浏览器的高度：" +  $(window).height() );
        ata();
    })
})

1 <body>

<div id="pa">
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>4</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>4</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>4</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>111</p>
</div>

2     <div id="container"></div> //加载数据的位置
3 </body>