I would like to make an Ajax call when a user scrolls down to the bottom of the screen. For some reason my code isn't working. I think it could be a syntax error but I checked my console and I don't see an error. Any suggestions, improvements or examples are welcomed.
<div id="content">
<?php include('post-1.php'); ?>
</div>
<div id="loading-image" style="display: none;"></div>
<div id="part2"></div>
<script>
window.onscroll = function(ev) {
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
$('#loading-image').show();
$.ajax({
url: "<?php echo get_stylesheet_directory_uri();?>/post-2.php",
cache: false,
success: function(html){
$("#part2").html(result);
},
complete: function(){
$('#loading-image').hide();
}
});
}
};
</script>