How to detect when at the bottom of a scrollable div?

Question

I created a website that loads data as you scroll down. Every time you hit the bottom of the page, it loads another 100 rows. I'm trying to replicate this in a div so that the header is always at the top no matter how far you scroll down.

I'm using JQuery and the scrollTop() function to do this.

Here is my code that works if it is not detecting the scroll bar in the div, but the whole window.

$(window).scroll(function(){
    if ($(window).scrollTop() == $(document).height() - $(window).height()){
            for(i; i < size+100; i++){
                document.getElementById('myTable').innerHTML += IPAMArray[i];
            }
            size = i;

    }
});

Now i change the div to this:

<div class = "tableDiv" id="myTableDiv" style="height:800px;width:1000px;border:1px solid #ccc; overflow: scroll;"><table id = "myTable"></table></div>

I dont know how to change this line from "document" and "window" to the correct div variables:

if ($(window).scrollTop() == $(document).height() - $(window).height()){

Here is where i'm currently at with that line:

if ($("div.tableDiv").scrollTop() == $(document).height() - $("div.tableDiv").height()){

I've tried quite a few variants, but i'm completely guessing the code so it could take forever. I would prefer to refer to this div by its ID rather than its class, but i just started using the class references because thats how most of the examples are online. I have tried $(document).getElementById('myTableDiv') in various ways as well but cant seem to find the solution.

Answer 1

if ($("#myTableDiv").scrollTop() == $("#myTable").outherHeight() - $("#myTableDiv").height()){

1. use ids to identify elements
2. the height of the inner element is what you need ( $("#myTable").height() )
3. jquery's height() function doesn't include borders margins and / or paddings as noted in the doc . Use outherHeight() instead.

OR

make your header position: fixed in css