Detecting when the bottom of a scrollable div has been reached with an offset

Question

I found this answer helpful here..

Jquery infinite scroll - with div not scrollbar of body

But now I would like to be able to offset that value by like 100 pixels so you don't have to reach the bottom of the div before the script will be run.

Initially I know if I do this...

$('#content').scroll ->
    if $(this).scrollTop() + $(this).outerHeight() >= ($(this)[0].scrollHeight - 100)
        console.log 'reached the bottom'

It will work, but it also fires each time that the number is greater than the other side of the equation, but I obviously don't want to try to fire an ajax script each time that script equals true.

How can I get this offset to work but somehow only fire it once?

Setting it to equal doesn't work because the scrollTop() doesn't give me every single number, sometimes it skips numbers if you're scrolling particularly fast.

Answer 1

you can add a variable to test if it's already fired.
when the condition is true check if variable is true, in this case do the work and set our variable to false.
you also need to set the value of this variable to true when you scroll up.