检测Scroll何时触及元素顶部

Question

Fid：https://jsfiddle.net/qcng3q7j/2/

＆＃13;

＆＃13;

<div *ngIf ="ibusQuestion">

＆＃13;

$(function(){

    $(window).scroll(function() {
    
      $(".hey").each( function(i){
 var bottomHeader = $(this).offset().top + $(this).height();
 console.log(bottomHeader);
 var bottomWindow = $(window).scrollTop() + $(window).height();

            if( bottomWindow > bottomHeader ){
                $(this).fadeIn(500);
         
            }
            
            });
    });

});

＆＃13;

.hey{
  position:absolute;
  top:500px;
  height:300px;
  width:500px;
  background:red;
  display:none;
}
body{
height:5000px;}

＆＃13;

＆＃13;

＆＃13;

当滚动到达元素的顶部或元素的底部时，我试图让div淡入淡出，当它不在元素上时也尝试淡出淡出。

当它击中顶部时，我已经完成了它应该淡入的部分，但为什么一旦我滚动而不是当我击中元素的顶部时，元素会逐渐消失？