scroll linked to a div in html with javascript

The function that I have and to show me more articles every time I reach the end of the page (infinite scroll page) works perfectly but I have a doubt that I can not solve, I want to load more articles as soon as the scroll arrives from div "footer" or the "final" div that comes before the footer instead of always loading at the end of the page

$(document).ready(function() {

var win = $ (window);

// Each time the user scrolls
win.scroll(function() {
    // End of the document reached?
    if ($(document).height() - win.height() == win.scrollTop()) {
        $('#loading').show();

         // Se jรก temos uma div com a classe "fim", nem chama o ajax de novo
    if ( $('.fim').length > 0 ) {
       $('#loading').hide();
       return false; 
    }

        var id = $(".tm:last").attr("id");
        var cat = $(".tm").attr("cat");
        $.ajax({
            url: 'content/layout/art/load2.php?id='+id+'&cat='+cat,
            dataType: 'html',
            success: function(html) {

            if(html){ 
            $('#posts').append(html);
            $('#loading').hide();
            }else{ 
            $('#posts').append("<div class='fim'><h1 style='color:red'>End of countries !!!!!!!</h1></div>");

            }




            }
        });
    }
});

});

The function works perfectly if I do not put anything at the end of the code, so the person reaches the end of the screen, the msg is displayed and there is nothing else to load, but as I explained above, I need that whenever I arrive to a certain div, the function runs and loads more ads or I create a global div where the ads are loaded inside it and when it reaches the end of that div yes yes load the code inserting more ads from it