如何触发网站上的特定部分

Question

我想要做的是，在视差部分中，当它们所在的容器位于屏幕中间（垂直）时到达其原始位置时的图像。

我只需要让图像在到达最高位置时停止。因此，我想要做的是通过应用此代码冻结该部分的视差效果。但是，它们似乎没有起作用。

我已将ID添加到2个部分。 1 ID是#parallax-d-active，我已经添加到上面的视差部分而没有。 2 ID是#parallax-active，它本身就是视差部分。

我不知道如何实现这一目标。请帮助。

先谢谢你。

这是我设置的测试网站。

http://salehahmad.com/test/parallax/

这是CSS代码：

.card-img-top.active {
   background-position: 50% 0!important;
}

这是我正在使用的js代码。

$('#parallax-active').waypoint(function() {
   $(".card-img-top").addClass("active");  
}, { offset: 101 });


$('#parallax-d-active').waypoint(function() {
    $(".card-img-top").removeClass("active");
}, { offset: 101 });