Javascript 创建一个；塞进；导航栏项目的效果

我正在尝试创建一种效果，在你向下滚动后导航栏项目会被折叠起来。这可以通过增加底部填充或减少顶部填充来有效实现。但是，当我尝试将其添加到代码中时，转换不会显示，也不会发生任何事情。我试图创造的一个例子可以在上面看到

到目前为止，我的代码可以在中看到

$（文档）.ready（函数（）{
$（窗口）。滚动（函数（）{
如果（$（文档）.scrollTop（）>10）{
$（'#nav'）.addClass（'shrink'）；
$（'#menu1'）.removeClass（'shrink'）；
}
否则{
$（'#nav'）.removeClass（'shrink'）；
$（'#menu1'）.removeClass（'shrink'）；
}
});
});
/*******正文概述**********/
身体{
保证金：0；
高度：2500px；
/*只是为了展示内容的外观*/
}
标题{
位置：固定；
排名：0；
左：0；
宽度：100%；
}
/*总有一天要解决这个问题*/
.bg img{
高度：100vh；
宽度：100%；
背景：url（'https://github.com/killerchef732/ItsAcademic/blob/master/images/Abkimage.JPG?raw=true');
背景尺寸：封面；
背景位置：中心；
位置：相对位置；
}
强壮的{
字体大小：粗体；
}
/*********航行*********/
@媒体屏幕和屏幕（最大宽度：900px）{
导航{
网格模板列：100%；
网格模板行：自动；
网格间距：1米；
}
}
#菜单1{
网格柱：1；
填充顶部：0px；
垫底：0px；
}
#菜单2{
网格柱：2；
填充顶部：0px；
垫底：0px；
}
#标志{
网格柱：3；
字体系列：“蒙特塞拉特”，无衬线；
字体重量：较轻；
字号：28px；
宽度：500px；
背景位置：中心；
背景尺寸：包含；
背景重复：无重复；
高度：7vh；
边缘底部：25px；
颜色：#000；
文本转换：大写；
字母间距：3px；
填充顶部：0px；
垫底：0px；
}
#菜单3{
网格柱：4；
填充顶部：0px；
垫底：0px；
}
#菜单4{
网格柱：5；
填充顶部：0px；
垫底：0px；
}
/**************悬停动画**************/
分区>a{
字体系列：“Raleway”；
文本转换：大写；
文字装饰：无；
颜色：#000；
位置：相对位置；
字体大小：0.8rem；
}
div>a：悬停{
颜色：#000；
}
div>a：之前{
内容：“；
位置：绝对位置；
宽度：100%；
高度：1px；
底部：-4px；
左：0；
背景色：#000；
可见性：隐藏；
-webkit转换：scaleX（0）；
变换：scaleX（0）；
-webkit转换：所有0.3都易于输入输出0；
过渡：所有0.3秒均为0秒；
}
div>a：悬停：之前{
能见度：可见；
-webkit转换：scaleX（1）；
变换：scaleX（1）；
}
/**********主割台***********/
标题{
颜色：白色；
证明内容：中心；
对齐内容：居中对齐；
排名：0；
底部：0；
左：0；
}
/**********身体*****************/
明福先生{
颜色：红色；
宽度：100%；
填充顶部：100px；
字体系列：“蒙特塞拉特”，无衬线；
字体重量：较轻；
}
.副标题{
左：4em；
垫顶：29em；
字体大小：100%；
颜色：#fff；
}
.头衔{
字号：3em；
文本对齐：左对齐；
颜色：#FFF；
垫底：0px；
}
.潜台词{
填充顶部：0px；
颜色：#FFF；
}
/*************导航传输到不透明动画*************/
导航{
显示：网格；
网格模板列：重复（5，1fr）；
网格间距：1米；
网格自动行：自动；
文本对齐：居中；
对齐项目：居中；
背景：透明；
z指数：100；
过渡：一切轻松。5s；
高度：70像素；
位置：相对位置；
z指数：99；
}
/*================新的CSS规则============*/
/*#导航{
位置：相对位置；
z指数：99；
}
*/
#导航，#字{
高度：0px；
背景：透明；
显示：块；
位置：固定；
宽度：100%；
z指数：99999；
过渡：一切轻松。5s；
}
#文字：{
字号：18px；
过渡：一切轻松。5s；
}
#导航收缩{
高度：80px；
过渡：一切轻松。5s；
背景：白色；
}
#menu1.1收缩{
填充顶部：0px；
过渡：一切轻松。5s；
}

一百周年纪念是学术性的
这是学术性的

百周年纪念

这是学术性的


每周二在506房间开会
非常好看的网站！这是你要找的

只需将此项添加到CSS中，即可完成以下操作：

.shrink .container{
  margin-top: -20px;
}

当然你应该把-20px调整到适合你的位置
 周五晚上，特罗林在附近，所以。。。我只是想说，这看起来很不错。干得好，先生或女士！这解决了你的问题吗？有什么我可以澄清的吗？