javascript - 将 div 设置为在窗口滚动位置更大时不显示

Question

当窗口滚动位置大于div的底部位置时，我需要隐藏div。我试着自己做，但我做错了什么。还有另一个问题，因为我需要更好的代码文本比来提交这个问题。为什么当我 alert(); img_top 它说对象对象吗？

$(document).ready(function(){
	var img_height = $("#head").outerHeight();
	var img_top = $("#head").offset();
  var img_bot = img_height + img_top;

  $(window).scroll(function(){
  	var wind_pos = $(window).scrollTop();
  	$("p").html(wind_pos);
    
    if(wind_pos > img_bot){
  	$("#head").addClass("hide");
  }
  });
});

*{
  margin: 0;
  padding: 0;
}

body{
  height: 4000px;
}

#head{
  height: 600px;
  background-color: blue;
}

.hide{
  display: none;
}

p{
  background-color: yellow;
  width: 100%;
  height: 50px;
}

<div id="head">

</div>
<p>
</p>
<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>

Answer 1

jQuery.offset()返回表示匹配元素位置的对象，你应该读取它的 top 属性。

$(document).ready(function() {
  var img_height = $("#head").outerHeight();
  var img_top = $("#head").offset().top;
  var img_bot = img_height + img_top;

  $(window).scroll(function() {
    var wind_pos = $(window).scrollTop();
    $("p").html(wind_pos);

    if (wind_pos > img_bot) {
      $("#head").addClass("hide");
    }
  });
});

* {
  margin: 0;
  padding: 0;
}

body {
  height: 4000px;
}

#head {
  height: 600px;
  background-color: blue;
}

.hide {
  display: none;
}

p {
  background-color: yellow;
  width: 100%;
  height: 50px;
}

<div id="head">

</div>
<p>
</p>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>