Problem with element that is bigger than viewport

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.