显示后如何重新隐藏div？

Question

到目前为止，我有this fiddle。滚动经过othdiv后显示div。任何想法如何在我向相反方向滚动div后再次隐藏div？

$(document).ready(function() {
  $("#dvid").hide(); //hide your div initially
  var topOfOthDiv = $("#othdiv").offset().top;
  $(window).scroll(function() {
    if ($(window).scrollTop() > topOfOthDiv) { //scrolled past the other div?
      $("#dvid").show(200); //reached the desired point -- show div
    }
  });
});

body {
  height: 800px;
  font-family: 'Arial', Helvetica, Sans-Serif;
  color: white;
  font-weight: bold;
}
#othdiv {
  height: 50px;
  background-color: rgb(0, 140, 200);
  /*just wanted this to be pretty :)*/
  position: absolute;
  top: 200px;
  left: 0px;
}
#dvid {
  background-color: rgb(34, 177, 76);
  height: 50px;
  position: absolute;
  top: 260px;
  left: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="othdiv">
  If you scroll past me, then you'll see the other div.
</div>
<div id="dvid">
  Oh hello! :D
</div>