滚动时使div显示和消失

Question

我试图使div显示并消失在窗口的顶部。这是我到目前为止所得到的：JSFiddle

<script>
$(document).ready( function() {
    $("#div_to_show").hide(); //hide your div initially
    $(window).scroll(function() {
        // once top of div is scrolled past
        if($('body').scrollTop() >= $("#div_to_scroll_past").offset().top) {
            console.log('past top');
            $("#div_to_show").hide(); //reached the desired point -- show div
        }
    });
});

$(document).ready( function() {
    $("#div_to_show").hide(); //hide your div initially
    $(window).scroll(function() {
        // once bottom of div is scrolled past
        if($('body').scrollTop() >= ( $("#div_to_scroll_past").offset().top + $("#div_to_scroll_past").outerHeight() )) {
            console.log('past bottom');
            $("#div_to_show").show(); //reached the desired point -- show div
        }
    });
});    
</script>

如果你不快速滚动，它可以在这里工作。向上滚动太快，首次出现的div不会再次消失。怎么解决这个问题？

另一个（大）问题是： 它在JSFiddle中工作但不在我的网页中。 （?????）要显示的div最初是正确隐藏的，但在向下滚动时不会出现。

涡流