How to load content inside a DIV with Ajax and php?

Hello Good Nights or Days have good today the problem I have with this  code is to load content when you move the browser bar to the bottom and what I want to do and I can not work within a div using the scroll as well as Facebook chat I hope you can help me with that and thanks in advance

ajax.js

$(document).ready(function(){
    $(window).scroll(function(){
        var lastID = $('.load-more').attr('lastID');
        if ($(window).scrollTop() == $(document).height() - $(window).height() && lastID != 0){
            $.ajax({
                type:'POST',
                url:'datos.php',
                data:'id='+lastID,
                beforeSend:function(html){
                    $('.load-more').show();
                },
                success:function(html){
                    $('.load-more').remove();
                    $('#postList').append(html);
                }
            });
        }
    });
});

dbConfig.php

<?php
//DB details
$dbHost = 'localhost';
$dbUsername = 'root';
$dbPassword = 'root';
$dbName = 'shareiv';

//Create connection and select DB
$db = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName);

if ($db->connect_error) {
    die("Unable to connect database: " . $db->connect_error);
} 
?>

index.php

<?php
//Include DB configuration file
include('dbConfig.php');
?>
<link rel="stylesheet" href="main.css">
<script src="jquery.js"></script>
<script src="ajax.js"></script>
<div class="container">
    <div class="row">
        <div class="col-lg-12">
            <div class="post-list" id="postList">
            <?php
            //get rows query
            $query = $db->query("SELECT * FROM chat WHERE post=1 ORDER BY id DESC LIMIT 7");
            if($query->num_rows > 0){ 
                while($row = $query->fetch_assoc()){ 
                    $postID = $row["id"];
            ?>
                <div class="list-item"><a href="javascript:void(0);"><h2><?php echo $row['mensaje']; ?></h2></a></div>
            <?php } ?>
            <div class="load-more" lastID="<?php echo $postID; ?>" style="display: none;">
                <img src="https://cdn.dribbble.com/users/503653/screenshots/3143656/fluid-loader.gif"/>
            </div>
            <?php } ?>
            </div>
        </div>
    </div>
</div>

datos.php

<?php
if(isset($_POST["id"]) && !empty($_POST["id"])){

//Include DB configuration file
include('dbConfig.php');

//Get last ID
$lastID = $_POST['id'];

//Limit on data display
$showLimit = 5;

//Get all rows except already displayed
$queryAll = $db->query("SELECT COUNT(*) as mensaje FROM chat WHERE id < ".$lastID." ORDER BY id DESC");
$rowAll = $queryAll->fetch_assoc();
$allNumRows = $rowAll['mensaje'];

//Get rows by limit except already displayed
$query = $db->query("SELECT * FROM chat WHERE id < ".$lastID." ORDER BY id DESC LIMIT ".$showLimit);

if($query->num_rows > 0){
    while($row = $query->fetch_assoc()){ 
        $postID = $row["id"]; ?>
        <div class="list-item"><a href="javascript:void(0);"><h2><?php echo $row["mensaje"]; ?></h2></a></div>
<?php } ?>
<?php if($allNumRows > $showLimit){ ?>
    <div class="load-more" lastID="<?php echo $postID; ?>" style="display: none;">
        <img src="loading.gif"/>
    </div>
<?php }else{ ?>
    <div class="load-more" lastID="0">
        That's All!
    </div>
<?php }
    }else{ ?>
    <div class="load-more" lastID="0">
        That's All!
    </div>
<?php
    }
}
?>

css.css

.post-list{ 
    margin-bottom:20px;
}
div.list-item {
    border-left: 4px solid #7ad03a;
    margin: 5px 15px 2px;
    padding: 1px 12px;
    background-color:#F1F1F1;
    -webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
    box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
    height: 60px;
}
div.list-item p {
    margin: .5em 0;
    padding: 2px;
    font-size: 13px;
    line-height: 1.5;
}
.list-item a {
    text-decoration: none;
    padding-bottom: 2px;
    color: #0074a2;
    -webkit-transition-property: border,background,color;
    transition-property: border,background,color;-webkit-transition-duration: .05s;
    transition-duration: .05s;
    -webkit-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;
}
.list-item a:hover{text-decoration:underline;}
.load-more {
    margin: 15px 25px;
    cursor: pointer;
    padding: 10px 0;
    text-align: center;
    font-weight:bold;
}
.list-item h2{font-size:25px; font-weight:bold;text-align: left;}