为什么向下滚动时不重新加载数据，而在无限滚动中返回页面顶部时为什么不重新加载数据？

Question

What I'm doing is an infinite scroll with jQuery, AJAX and PHP but when you have to load data, I reload the page when I go to the top of the page and not when it is almost at the bottom of the page, I leave my code of jQuery and AJAX. Thank you in advance!

<script type="text/javascript">
            var start = 0;
            var limit = 5;
            var reachedMax = false;

            $(window).scroll(function () {
                if ($(window).scrollTop() == $(document).height() - $(window).height())
                    getData();
            });

            $(document).ready(function () {
               getData();
            });

            function getData() {
                if (reachedMax)
                    return;

                $.ajax({
                   url: 'publicaciones.php',
                   method: 'POST',
                   dataType: 'text',
                   data: {
                       getData: 1,
                       start: start,
                       limit: limit
                   },
                   success: function(response) {
                        if (response == "reachedMax")
                            reachedMax = true;
                        else {
                            start += limit;
                            $(".results").append(response);
                        }
                    }
                });
            }
        </script>

This is my PHP, I add the code to resolve my problem. I think my PHP its necessary.

<?php
    session_start();
    include ('../conexion.php');

    if(isset($_SESSION['id']))
    {
        $id = mysqli_real_escape_string($conexion, $_SESSION['id']);

        $infouser = mysqli_query($conexion, "SELECT * FROM users WHERE id = $id");  
        $use = mysqli_fetch_array($infouser);
    }

    if(isset($_POST['getData']))
    {   
        $start = mysqli_real_escape_string($conexion,$_POST['start']);
        $limit = mysqli_real_escape_string($conexion,$_POST['limit']);

        $consulta = mysqli_query($conexion, "SELECT * FROM publicaciones ORDER BY id_pub DESC LIMIT $start, $limit");   

        if(mysqli_num_rows($consulta) > 0)
        {   
            $response = "";

            while($data = mysqli_fetch_array($consulta)) {
                $response .= "
                    <div class='card mt-3 border-0 rounded-0'>
                        <div class='card-body'>
                            <div class='row'>
                                <div class='col-sm-2'>
                                    <div class='img-user rounded-circle'>
                                        <img class='img-fluid-pub' src='../avatars/".$use['avatar']."' alt='User Image'>
                                    </div>
                                </div>
                                <div class='col-sm-10'>
                                    <a class='text-muted h3' href='perfil.php?id=".$use['id']."'>".$use['usuario']."</a><h3>Seguir</h3>
                                    <p>".$data['fecha']."</p>
                                    <p>".$data['titulo']." Me gusta</p>
                                    <p id='descripcion'>".$data['descripcion']."</p>
                                    <p class='leermas' onclick='leerMas(this);'>Leer más...</p>             
                                    <video controls>
                                        <source src='../anadir-publicacion/publicaciones/".$data['video']."' type='video/mp4'>
                                        Your browser does not support HTML5 video.
                                    </video>
                                    <p>Kcal: ".$data['kcal']." CarbHid: ".$data['carbohidratos']." Prot: ".$data['proteinas']." Gras: ".$data['grasas']." Tiempo: ".$data['tiempo']."m Personas: ".$data['personas']." Dinero aprox: ".$data['precio']."€ Categoría: ".$data['categoria']."</p>
                                </div>
                            </div>
                        </div>
                    </div>  
                ";
            }

            exit($response);
        }
        else 
            exit('reachedMax');
    }   
?>

Answer 1

It is normal $(window).scrollTop() is equal to 0 at the start and $(document).height() is equal to $(window).height() so yes 0 == 0 at the top of your page

what you want is

 var nb_px_before_load = 100
    if($(window).innerHeight() - $(window).scrollTop() < nb_px_before_load){
        getData();
    }

You can easily see this with the devTools of chrome with breakpoints