javascript - jQuery detect if div is outside of view port vertically -

i'm trying detect when div gets opened top of outside of view-port & if add class adjust css.

so in example on hover half of div missing should add class turn div green. because code meant detect div outside viewport.

but cant sync. i'm doing wrong here.

update

i have noticed technically working happening if both top , bottom of div goes outside of both bottom , top of view port triggers. need trigger when goes out of top.

jsfiddle

$(document).on("mouseenter", ":has('.infotip')", function() {    $(this).children(".infotip").addclass("active");  });  $(document).on("mouseleave", ":has('.infotip')", function() {    $(this).children(".infotip").removeclass("active");  });    // infotip on screen  $(document).on("mouseenter", ":has('.infotip.onscreen')", function() {    var $target = $(this).children(".infotip");    if ($target.length) {      var $bounce = $target.offset().top + $target.height();        if ($bounce > $(window).height()) {          $target.addclass("test");        } else {          $target.addclass("top");        }      }    });

.infotip {    display: none;    height:500px;    width:100px;    position:absolute;    left:50px;    top:-250px;  }  .infotip.active {    display: block;  }  /* goes red when past top of viewport (which not in example) */    .infotip.top {    background-color: rgba(249, 14, 18, 1.00)  }  /* goes green if visible (which should when hovering) */    .infotip.test {    background-color: rgba(35, 223, 51, 1.00)  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>  <div class="team-card align">    hover me    <div class="infotip onscreen">      iam infotip    </div>  </div>

here issue, on-hover detect div height , if overflows changes div green.

$(document).on("mouseenter", function() {   var $target = $(".team-card").children(".infotip");   if ($target.length) {     var $bounce = $target.offset().top + $target.height();      if ($bounce > $(window).height()) {         $target.addclass("test");       } else {         $target.addclass("top");       }     }  });