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

我需要在我的.form元素之后完全滚动到顶部（并从视图端口消失），以便将类添加到特定元素。我现在不明白为什么它会在我的窗体块的一半可见性中触发。你知道为什么吗

var$form_block=$（'.form block'）；
变量$wrapper=$（'.wrapper'）；
var$form\u block\u height=$form\u block.outerHeight（true）；
变量$form_block_filter=$（'.form block filter'）；
控制台日志（$form\u block\u height）
$wrapper.scroll（函数（）{
var our_coordinates=$form_block.offset（）.top+$form_block_height；
if（我们的_坐标<$wrapper.scrollTop（））{
$form_block_filter.addClass（'active'）；
}否则{
$form_block_filter.removeClass（'active'）；
}
})

*{
框大小：边框框；
}
身体{
字体系列：“Abel”，无衬线；
}
.包装纸{
边框：1px实心#333；
宽度：640px；
高度：400px；
保证金：30像素自动；
溢出y：滚动；
填充底部：500px；
位置：相对位置；
}
.wrapper.form块{
背景色：#7474；
高度：600px；
宽度：80%；
保证金：自动；
}
.wrapper.form块头{
背景色：#333；
填充：20px；
颜色：#fff；
字体大小：24px；
}
.wrapper.form块过滤器{
位置：固定；
排名：0；
左：0；
宽度：100%；
背景色：#d5d5d5；
颜色：#333；
字体大小：24px；
填充：20px 20px 20px 60px；
-webkit转换：translateY（-100%）；
转换：translateY（-100%）；
-webkit转换：400ms；
过渡时间：400ms；
}
.wrapper.form-block-filter.active{
-webkit转换：translateY（0）；
变换：translateY（0）；
}
* {
框大小：边框框；
}
身体{
字体系列：“Abel”，无衬线；
}
.包装纸{
边框：1px实心#333；
宽度：640px；
高度：400px；
保证金：30像素自动；
溢出y：滚动；
填充底部：500px；
位置：相对位置；
}
.wrapper.form块{
背景色：#7474；
高度：600px；
宽度：80%；
保证金：自动；
}
.wrapper.form块头{
背景色：#333；
填充：20px；
颜色：#fff；
字体大小：24px；
}
.wrapper.form块过滤器{
位置：固定；
排名：0；
左：0；
宽度：100%；
背景色：#d5d5d5；
颜色：#333；
字体大小：24px；
填充：20px 20px 20px 60px；
-webkit转换：translateY（-100%）；
转换：translateY（-100%）；
-webkit转换：400ms；
过渡时间：400ms；
}
.wrapper.form-block-filter.active{
-webkit转换：translateY（0）；
变换：translateY（0）；
}

我们的过滤器本身
我们的表格