Member Avatar for dschuett

I have a scroll function that I want to fire when the user scrolls to the very bottom of the page. However it is doing the exact opposite; it is firing at the top of the page. I have used this before, and everything on the web says to do it this same way as well. The only thing I can think of is that it has something to do with using bootstrap. Any ideas? Here is an example: Click Here

 // Load More Results On Scroll
    var busy = false;
    $(window).scroll(function(){
        if($(window).scrollTop() + $(window).height() == $(document).height() && !busy){
            // Currently Fetching Results
            busy = true;

            // Fetch The Rows
            setTimeout(function() {
                $.ajax({
                    url: "../assets/server/public/callbacks.php",
                    type: "POST",
                    dataType: "JSON",
                    data: {
                        filter: '',
                        old_id: $("#old-id").val(),
                        callback: 'selectPreviousTenPosts'
                    },
                    cache: false,
                    success: function(data){
                        $("#feed-wrapper").append(data.post);
                        $("#old-id").val(data.old_id);
                        busy = false;
                    }
                });
            }, 500);
        }
    });
Edited by dschuett
  • 2 Contributors
  • 1 Reply
  • 299 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by AleMonteiro
Member Avatar for AleMonteiro

In the example you gave, they use this validation:

if($(window).scrollTop() + window.innerHeight >= $(document).height() - 50 && !busy){

}

View Source is very usefull =)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.