如何在div元素中侦听滚动事件？

Question

我需要在 .form-element 完全滚动到顶部（并从视图端口消失）后才能将类添加到特定元素。我现在无法理解为什么它会触发我的 .form-b​​lock 的一半可见性。有什么想法吗？

var $form_block = $('.form-block');
var $wrapper = $('.wrapper');
var $form_block_height = $form_block.outerHeight(true);
var $form_block_filter = $('.form-block-filter');
console.log($form_block_height)

$wrapper.scroll( function(){
	var our_coordinates = $form_block.offset().top + $form_block_height;
	if(our_coordinates < $wrapper.scrollTop()) {
		$form_block_filter.addClass('active');
	} else {
		$form_block_filter.removeClass('active');
	}
})

* {
  box-sizing: border-box;
}

body {
  font-family: 'Abel', sans-serif;
}

.wrapper {
  border: 1px solid #333;
  width: 640px;
  height: 400px;
  margin: 30px auto;
  overflow-y: scroll;
  padding-bottom: 500px;
  position: relative;
}
.wrapper .form-block {
  background-color: #747474;
  height: 600px;
  width: 80%;
  margin: auto;
}
.wrapper .form-block-header {
  background-color: #333;
  padding: 20px;
  color: #fff;
  font-size: 24px;
}
.wrapper .form-block-filter {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #d5d5d5;
  color: #333;
  font-size: 24px;
  padding: 20px 20px 20px 60px;
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
  -webkit-transition: 400ms;
  transition: 400ms;
}
.wrapper .form-block-filter.active {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
* {
  box-sizing: border-box;
}

body {
  font-family: 'Abel', sans-serif;
}

.wrapper {
  border: 1px solid #333;
  width: 640px;
  height: 400px;
  margin: 30px auto;
  overflow-y: scroll;
  padding-bottom: 500px;
  position: relative;
}
.wrapper .form-block {
  background-color: #747474;
  height: 600px;
  width: 80%;
  margin: auto;
}
.wrapper .form-block-header {
  background-color: #333;
  padding: 20px;
  color: #fff;
  font-size: 24px;
}
.wrapper .form-block-filter {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #d5d5d5;
  color: #333;
  font-size: 24px;
  padding: 20px 20px 20px 60px;
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
  -webkit-transition: 400ms;
  transition: 400ms;
}
.wrapper .form-block-filter.active {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
	<div class="form-block-filter">
		Our filter itself
	</div>
	<div class="form-block">
		<div class="form-block-header"> 
			Our form list
		</div>
	</div>
</div>