Javascript Jquery滚动不触发任何内容

当用户从页面顶部向下滚动时，我尝试执行一个动画，当用户尝试滚动到页面最大高度以上时，我尝试反转动画。目前没有触发任何内容，并且console.log没有使用我的

滚动功能启动，我不知道为什么，任何帮助都会很棒！）

HTML:

JS:

谢谢大家!
 这是因为您的主机是固定的、全高的。移除

position: fixed;
height: 100vh;

从中可以解决问题


$（窗口）。滚动（函数（）{
var scroll=$（窗口）.scrollTop（）；
如果（滚动>=50）{
控制台日志（“原始启动”）；
setTimeout（函数（）{
$（“.headshot”）.addClass（“滑入”）；
}，i*100）；
setTimeout（函数（）{
$（“.mainframe”）.addClass（“向上滑动”）；
}，i*200）；
}否则{
控制台日志（“点火反转”）；
setTimeout（函数（）{
$（“.mainframe”）.removeClass（“向上滑动”）；
}，i*100）；
setTimeout（函数（）{
$（“.headshot”）.removeClass（“滑入”）；
}，i*200）；
}
});
大型机{
最高：0%；
高度：100vh；
宽度：150vw；
边际上限：0；
页边距底部：0；
}
.头像{
位置：相对位置；
浮动：对；
宽度：50%；
身高：100%；
背景色：白色；
z指数：99；
}
.滑入{
右：50%；
}
.滑上去{
前-100%；
}

使用者

">
有几件事

首先，您需要更改
.mainframe
类的高度，因为
高度：100vh；
意味着将不进行滚动，它实际上与视图窗口一样高。
除此之外，您还需要向
.mainframe
类添加一个
溢出：scroll；

这是该类的外观：

.mainframe {
  position: fixed;
  height: 200vh;
  width: 200vw;
  margin-top: 0;
  margin-bottom: 0;
  overflow: scroll;
}

$('.mainframe').scroll(function() {    
    var scroll = $(window).scrollTop();
    ....
});

除此之外，您还需要使用jQuery将滚动侦听器添加到
.mainframe
类，而不是窗口

它应该是这样的：

.mainframe {
  position: fixed;
  height: 200vh;
  width: 200vw;
  margin-top: 0;
  margin-bottom: 0;
  overflow: scroll;
}

$('.mainframe').scroll(function() {    
    var scroll = $(window).scrollTop();
    ....
});

正如其他人提到的，
i
变量没有在任何地方声明，因此它会在控制台中导致错误

如果你想仔细看一下，这里有一个JSFIDLE（）。
你可以在Scroll上使用什么是
i
？同时移除
固定的
位置和
高度可以解决这个问题。也许可以添加一把小提琴。
$('.mainframe').scroll(function() {    
    var scroll = $(window).scrollTop();
    ....
});