If(isinView)/else is not firing as expected.
isInView only fires when the top of the element comes into or exits the viewport. The bottom of the element does not fire isInView at all (Also related to previously submitted issue #2 with visiblePartY=='bottom').
Expected and actual results of the following example are detailed below:
<body style="padding:2000px 0;">
<div style="min-height:2000px;background:red;"></div>
<script type="text/javascript">
$('div').bind('inview', function(e, isInView, visiblePartX, visiblePartY) {
if (isInView) {
console.log('Element in view');
if (visiblePartY == 'top') {
console.log('Top of element in view.');
} else if (visiblePartY == 'bottom') {
console.log('Bottom of element in view.');
} else {
console.log('Element is entirely in view.')
}
} else {
console.log('Element no longer in view.');
}
});
</script>
</body>
Expected result when scrolling down the page from the top:
1) The top edge of the element comes into the bottom of the viewport, firing "isInView" (Console log "Element in view") and "visiblePartY == 'top'" (Console log "Top of element in view").
2) Scroll down continues
3) The top edge of the element goes out of the top of the viewport. Nothing fires.
4) Scroll down continues
5) The bottom edge of the element comes into the bottom of the viewport, firing "isInView" (Console log "Element in view") and "visiblePartY == 'bottom'" (Console log "Bottom of element in view").
6) Scroll down continues
7) The bottom edge of the element goes out of the top of the viewport, firing "isInView'/else (Console log "Element no longer in view").
8) Reverse scroll, now scrolling up the page
9) The bottom edge of the element comes into the top of the viewport, firing "isInView" (Console log "Element in view") and "visiblePartY == 'bottom'" (Console log "Bottom of element in view").
10) Scroll up continues
11) The bottom edge of the element goes out of the bottom of the viewport. Nothing fires.
12) Scroll up continues
13) The top edge of the element comes into the top of the viewport, firing "isInView" (Console log "Element in view") and "visiblePartY == 'top'" (Console log "Top of element in view").
14) Scroll up continues
15) The top edge of the element goes out of the bottom of the viewport, firing "isInView'/else (Console log "Element no longer in view").
16) Scroll ends
Actual result when scrolling down the page from the top:
1) The top edge of the element comes into the bottom of the viewport, firing "isInView" (Console log "Element in view") and "visiblePartY == 'top'" (Console log "Top of element in view").
2) Scroll down continues
3) The top edge of the element goes out of the top of the viewport, firing "isInView" (Console log "Element in view") and "visiblePartY == 'bottom'" (Console log "Bottom of element in view").
4) Scroll down continues
5) The bottom edge of the element comes into the bottom of the viewport. Nothing fires.
6) Scroll down continues
7) The bottom edge of the element goes out of the top of the viewport. Nothing fires.
8) Reverse scroll, now scrolling up the page
9) The bottom edge of the element comes into the top of the viewport. Nothing fires.
10) Scroll up continues
11) The bottom edge of the element goes out of the bottom of the viewport. Nothing fires.
12) Scroll up continues
13) The top edge of the element comes into the top of the viewport, firing "isInView" (Console log "Element in view") and "visiblePartY == 'top'" (Console log "Top of element in view").
14) Scroll up continues
15) The top edge of the element goes out of the bottom of the viewport, firing "isInView'/else (Console log "Element no longer in view").
16) Scroll ends