Javascript 卷轴上的标题更改

在我正在创建的一个站点上，我想在其中放置一个可以改变卷轴大小的标题。我已经做了两个方法，理论上应该是有效的。这个标题是包含JS的更大文档的一部分，当我测试另一个JS时，我认为这不是一个主要的语法错误。另外，当我检查elemented it时，我在控制台中没有看到任何错误

$（文档）.on（'scroll'，函数（e）{
var值=$（this.scrollTop（）；
如果（值<100）
$（“标题”）.css（“高度”，“100px”）；
其他的
$（“标题”）.css（“高度”，“45px”）；
});
标题{
高度：300px；
背景色：#69D2E7；
字体系列：“Raleway”，无衬线；
z指数：30；
宽度：100vw；
盒影：1px10x10pxRGBA（40,40,40,0.6）；
位置：固定；
}
我认为在你的两个例子中，身体的高度都不足以进行滚动


$（文档）.on（'scroll'，函数（e）{
var值=$（this.scrollTop（）；
如果（值<100）
$（“标题”）.css（“高度”，“100px”）；
其他的
$（“标题”）.css（“高度”，“45px”）；
});
标题{
高度：300px；
背景色：#69D2E7；
字体系列：“Raleway”，无衬线；
z指数：30；
宽度：100vw；
盒影：1px10x10pxRGBA（40,40,40,0.6）；
位置：固定；
}
身体{
最小高度：1000px；
}
您的代码可以正常工作，但页面似乎太短，实际上不需要滚动，您需要滚动才能触发滚动事件。即使触发，$.scrollTop（）也会返回视口上方页面部分的像素高度，因此您必须使页面至少比视口高100像素才能获得所需的效果。尝试向页面中添加更多内容，或将最小高度设置为大于文档正文上的视口


$（文档）.on（'scroll'，函数（e）{
var值=$（this.scrollTop（）；
如果（值<100）
$（“标题”）.css（“高度”，“100px”）；
其他的
$（“标题”）.css（“高度”，“45px”）；
});
正文{
最小高度：1000px
}
标题{
高度：300px；
背景色：#69D2E7；
字体系列：“Raleway”，无衬线；
z指数：30；
宽度：100vw；
盒影：1px10x10pxRGBA（40,40,40,0.6）；
位置：固定；
}