Requête AJAX fonctionnelle mais bug affichage HTML

Bonjour,

Voila je rencontre un petit problème avec mon code.

Ce que je fais

Alors voilà, j'ai créé un forum où les posts s'affichent au fur et à mesure lorsque la scrollbar atteint le bas de la fenêtre.

`<div class="row">
                    <div class="col-sm-7 col-md-offset-1 post">
                        <?php
                            $req = $db->prepare('SELECT u.Prenom_user Prenom, u.Nom_user Nom, p.date_publi date_creation, p.Message_post message, p.Id_post id_post
                            FROM post p JOIN utilisateur u ON p.id_user=u.ID_user
                            WHERE p.id_topic = :id LIMIT 0,5');
                            $req->bindvalue(':id', $_GET['id_topic']);
                            $req->execute();

                        while($donnees = $req->fetch())
                        {

                            echo'
                                    <div class="text-box my-color item" id="'.$donnees['id_post'].'">
                                        <div class="comment-body">

                                            <div class="comment-meta">

                                                <div class="comment-author">

                                                    <img class="avatar" src="images/blog/blog-post/author-comment-1.jpg" alt="">                                     
                                                    <a class="fn" href="#">'.$donnees['Prenom'].' '.$donnees['Nom'].'</a>
                                                    <span class="says">says:</span>

                                                </div><!-- comment-author -->

                                                 <div class="comment-metadata">
                                                    <a href="#">'.$donnees['date_creation'].'</a>
                                                </div><!-- comment-metadata -->

                                            </div><!-- comment-meta -->

                                            <div class="comment-content">

                                                <p>'.$donnees['message'].'</p>

                                            </div><!--  comment-content -->

                                        </div><!-- comment-body -->

                        </div><!-- text-box -->';

                        }
                        ?>

                    </div><!-- col -->
                </div>

                <!-- Requête ajax post -->
                <script src="assets/plugins/jquery/jquery-2.2.3.min.js"></script>
                <script type="text/javascript">
                $(window).scroll(function(){

                    if($(window).scrollTop() == $(document).height() - $(window).height()) {
                        $.ajax({
                        url : "includes/post_ajax.php?lastid=" + $(".item:last").attr("id") + "&id_topic=" + $(".topic:last").attr("id"),
                        success: function(html){
                            if(html){
                                $(".post").append(html);

                            }else{

                            }
                            }
                        });
                    }

                });

  </script>
    <!-- Fin requête ajax -->`

<?php
    try{
        $db = new PDO('mysql:host=localhost;dbname=forum_geii', 'root','');
        }
        catch (Exeception $e){
        die('Erreur : '. $e->getMessage());
        }

        if($_GET['lastid']){

            $post = $db->prepare('SELECT u.Prenom_user Prenom, u.Nom_user Nom, p.date_publi date_creation, p.Message_post message, p.Id_post id_post
              FROM post p JOIN utilisateur u ON p.id_user=u.ID_user
              WHERE p.id_topic = :id_topic AND id_post > :id LIMIT 0,5');
              $post->execute(array('id_topic' => $_GET['id_topic'],
                                    'id' => $_GET['lastid']
                            ));
            while ($donnees = $post->fetch()) {
            echo
                '<div class="text-box my-color item" id="'.$donnees['id_post'].'">
                    <div class="comment-body">

                      <div class="comment-meta">

                        <div class="comment-author">

                          <img class="avatar" src="images/blog/blog-post/author-comment-1.jpg" alt="">                   
                          <a class="fn" href="#">'.$donnees['Prenom'].' '.$donnees['Nom'].'</a>
                          <span class="says">says:</span>

                        </div><!-- comment-author -->

                         <div class="comment-metadata">
                          <a href="#">'.$donnees['date_creation'].'</a>
                        </div><!-- comment-metadata -->

                      </div><!-- comment-meta -->

                      <div class="comment-content">

                        <p>'.$donnees['message'].'</p>

                      </div><!--  comment-content -->

                    </div><!-- comment-body -->

            </div><!-- text-box -->';
        }
        $post->closeCursor();

    }

Ce que je veux

Vous l'aurez deviné au vu du code je cherche à afficher successivement mes posts à la "Twitter" lorque la scrollbar est en bas !

Ce que j'obtiens

Lorsque j'arrive en bas de page, aucun problème la requête se lance mais je suis obligé de scroller d'abord vers le haut puis redescendre pour afficher les posts...c'est légèrement embêtant ! Si quelqu'un avait une petite idée pour corriger cela, j'en serai très reconnaissant,
Merci :)