javascript - 将div滚动到 View 中时触发事件

Question

当用户滚动到页面顶部和底部时，我能够注册一个事件，但当用户滚动到页面折叠下方时无法触发事件。我在中间有一个 div #below-fold，当它向下滚动进入浏览器的视口(viewport)时，我需要触发它。

我需要无需额外的插件来执行此操作。

HTML

<div class="top">TOP</div>
<div id="below-fold">Fold</div>
<div class="bottom">Bottom</div>

jQuery

$(function () {
var $win = $(window);

$win.scroll(function () {
    if ($win.scrollTop() == 0) {
        console.log("USER SCROLLED TO TOP");
        mixpanel.track(
            "User Scrolled To Top", {
            "url": window.location.href
        });
    } else if ($win.height() + $win.scrollTop() >= $('#below-fold').height() - 0 && $win.height() + $win.scrollTop() <= $('#below-fold').height() + 0) {
        console.log("VIEWED BELOW THE FOLD");
        mixpanel.track(
            "User Scrolled Below Fold", {
            "url": window.location.href
        });
    } else if ($win.height() + $win.scrollTop() == $(document).height()) {
        console.log("USER SCROLLED TO BOTTOM");
        mixpanel.track(
            "User Scrolled To Bottom", {
            "url": window.location.href
        });
    }
});

});

JSFIDDLE:LINK

Answer 1

将 else if 更改为:

else if ($win.scrollTop() >= $('#below-fold').position().top - $win.height() && $win.height() + $win.scrollTop()  < $(document).height())

更新:http://jsfiddle.net/rndam8ns/6/

添加了 var returned = false 到混合中，这样它只在向下滚动时触发一次，当滚动到顶部时，它会重置并再次触发