scroll linked to a div in html with javascript

Question

the function I have is to show me more articles every time I arrive at the end of the page ( infinite scroll paging ) works perfectly but I have a doubt that I am not able to solve, I want to load more articles as soon as the scroll arrives from div "footer" or in div "final" that comes before the footer instead of always clicking 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 that there is nothing else to be loaded, but as I explained above , I need that whenever you reach a certain div, the function runs and loads more ads or I create a global divide where the ads are loaded inside it and when it gets to the end of that divide then load the code by entering more ads detro from it