使用未运行的JavaScript更改DIV大小

当有人向下滚动页面时，我想自动调整我的固定div菜单栏的大小。我在网上找到了一个我想要的工作示例（参见下面的JSFIDLE）

然后我试着将其应用到我的项目中。。但它不起作用。向下滚动没有按预期调整div的大小

下面是上面的代码和我的菜单栏

另外，我不确定我是否正确导入了它（我已经有一段时间没有接触任何与web相关的编码了）

我试着先在我的电脑上复制我发布的JSFIDLE，然后在浏览器中打开它，但它没有像在JSFIDLE上那样工作

---

有人知道我做错了什么吗？

您可能有较旧版本的jquery，或者没有包含jquery库。请包括最新的jquery

以下是更新版本：

演示

$（文档）。滚动（函数（）{
"严格使用",；
如果（$（this）.scrollTop（）>45）{
//将固定div设置为小尺寸动画：
$（'#nav'）.stop（）.animate（{height:45}，100）；
}否则{
//将固定div设置为原始大小的动画
$（'#nav'）.stop（）.animate（{height:60}，100）；
}
}); 
body{
溢出y：滚动；
填充：0；
保证金：0；
字体系列：世纪哥特式，无衬线；
字体颜色：#5c3d；
字体大小：10px；
背景色：#FFFFFF；
高度：2000px；
}
#导航{
背景色：#FFFFFF；
边框底部：薄实线#5c3d；
位置：固定；
宽度：100%；
排名：0；
}
#导航菜单{
底部：0px；
高度：60px；
宽度：960px；
保证金：0自动；
背景：url（'images/logo2.png'）不重复左下角；
文本对齐：右对齐；
}
#nav ul{列表样式类型：无；填充：0；边距：0；}
#nav ul li{显示：内联块；}
#nav ul li:悬停{背景色：#333；}
#nav ul li a，访问{颜色：5C5C3D；显示：块；填充：15px；文本装饰：无；}
#包装{宽度：960px；边距：0自动；文本对齐：左；}
#内容{背景色：#FFF；边框：3px实心#DDD；填充：20px；边距：80px 0；}








这是一个标题！
您正在学习如何创建固定的水平导航菜单

您的小提琴不起作用，因为您没有包括jQuery。啊，谢谢你！，现在想知道为什么它不能在web浏览器中运行。o.您的用例是什么？这看起来像是一个糟糕的UI设计，如果您不介意回答的话，我想知道您为什么想要这个功能。我很想看看这方面的有效用例。你好，伙计，当你继续向下滚动动画时，我忍不住想看看你的动画有多笨拙。这是因为在每次滚动事件中都会停止它。若要修复此问题，请仅添加一个标志，以了解您是否已运行动画。这是一个例子。有一个很好的编程伙伴。@Sinistralis我实际上在几个网站上经常看到这种用法，我喜欢它的想法。菜单栏从大约100px开始，带有大的公司徽标和/或公司名称，然后随着菜单栏缩小到更小的尺寸，大约30-45px。主页将包含大部分信息，并将向下滚动很长一段时间，有点像苹果的产品页面。缩小的菜单栏将始终保持在顶部。因此，当有人向下滚动5-6页时，他们不必单击“顶部”按钮或滚动回顶部即可使用菜单栏。它总是在那里。谢谢巴文！它现在就像预期的那样工作。非常感谢兄弟。
<link rel="stylesheet" type="text/css" href="css.css">
<script src="js.js"></script>