Problem with element that is bigger than viewport

[shem8]

When I have an element that is bigger that the viewport the onChange will never trigger with true.

That's because we're doing the following check:

var visibilityRect = {
      top: rect.top >= containmentRect.top,
      left: rect.left >= containmentRect.left,
      bottom: rect.bottom <= containmentRect.bottom,
      right: rect.right <= containmentRect.right
    };

So in any given moment the rect.bottom <= containmentRect.bottom && rect.top >= containmentRect.top will be true.

The solution is to change state to be some kind of enum (NONE, TOP, BOTTOM, COMPLETE), so we'll able to trigger onChange(true) when TOP && BOTTOM exists.