Offset & Position Values Changing when Scrolled?

Offset & Position Values Changing when Scrolled?

So what I'm trying to accomplish is a "sticky footer" for an active article within a list of articles.  When the user is scrolling through the active article, the footer "sticks" to the bottom of the screen - until scrolling reaches the bottom of the article, at which point the footer sticks to the article's bottom.  (Or top when scrolling up.)

I had this all working (demo here), but then actually implemented it into our layout which uses a scrolling DIV container for all the articles, it breaks - because the .offset and .position properties both apparently scale with the scrolling of the div.  (Second demo here).

Should I be using something other than offset or position?  After writing this all out, I realized that maybe subtracting or adding the scroll amount to the offset().top or position().top may solve the issue...