AJAX on Scroll doesn't work when toolbar loaded

Question

I use this code to get data from server while scrolling using jQuery AJAX:

 var pageIndex = 0;
 var pageCount;

$(window).scroll(function () {

    if (($(window).scrollTop()) == ($(document).height() - $(window).height())) {
        GetRecords();
    }
});
$(function () {
    GetRecords();
});
function GetRecords() {
    pageIndex++;
    if (pageIndex == 1 || pageIndex <= pageCount) {
        $("#loader").show();
        $.ajax({
            type: "POST",
            url: "mainPage.aspx/GetImages",
            data: '{pageIndex: ' + pageIndex + '}',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: OnSuccess,
            failure: function (response) {
                alert(response.responseText);
            },
            error: function (response) {
                alert(response.responseText);
            }
        });
    }
}

When I add a toolbar to my browser (below of address bar) scroll method doesn't work any more. How can I solve this problem?

Answer 1

I think the condition in if statement is never satisfied in your code. Try to console log out something first to check if scroll is working or not.

Answer 2

HI here is working example. Wrap in document ready function. if still not bubble. let me know what jquery version currently you using.This working example i am using jquery v1.2.3 in that example.

  $('div').scroll(function(){ alert("scroling"); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <div style="overflow: scroll;height:150px;"> aalskdjflkasjdflkasd a'lsdkfjlasjdf;la lkajsdflkjas;df <br> <br>ksdkf;kasd;lfk;asdkf;lasd <br> a;sdjflkasjdflkasd <br> asdf;lkasd;lfasd <br> a;sdjflasjdflkjaskdl <br>asdjflkajsdflkjasdlkf <br> asdfkjlaksdjflkjasdlkf asdljflkasdjflkas<br> alsdkfjlkasdjflasd <br>kaljdsflkjasdlkfjasdl <br> </div> 

Note:

The scroll event is sent to an element when the user scrolls to a different place in the element. It applies to window objects, but also to scrollable frames and elements with the overflow CSS property set to scroll (or auto when the element's explicit height or width is less than the height or width of its contents).