Html Can'；t使用粘性位置CSS固定导航栏

我一直在为这个问题苦苦挣扎。我制作了一个带有两个下拉菜单和动画的导航栏。我现在想做的是，使它固定，每当滚动X像素时（我在代码中将它设置为5px）。基本上，当您滚动浏览导航栏上方的内容时，它应该是固定的

我有一个带有整个导航栏的导航标签，我在上面添加了CSS（试图使其具有粘性）：

我已经阅读了很多关于这个问题的其他帖子，但是在我的代码中似乎找不到任何提到的问题

我检查/尝试的内容：

• 导航栏不在标题元素内
• 在包含元素上未隐藏溢出
• 改变显示方式：flex；关于父母
• 元素在动画之后不获取样式：动画填充模式：无

我知道这也可以通过Javascript实现，但我真的希望通过使用CSS来实现

我真的很感激任何帮助

我的代码：

*{
保证金：0；
填充：0；
}
身体{
页边距底部：3000px；/*将滚动添加到页面*/
}
p{
显示：块；
}
.导航集装箱{
/*粘性部分---------------------*/
位置：粘性；
职位：-网络工具包粘性；
顶部：5px；
动画名称：导航栏动画；
动画持续时间：1s；
动画填充模式：无；
动画计时功能：轻松；
动画迭代次数：1；
动画方向：正常；
/*网络工具包*/
-webkit动画名称：导航栏动画；
-webkit动画持续时间：1s；
-webkit动画填充模式：无；
-webkit动画计时功能：轻松；
-webkit动画迭代计数：1；
-webkit动画方向：正常；
}
@导航栏动画的关键帧{
0% {
变换：平移（0，-60px）；
不透明度：1；
}
100% {
变换：平移（0,0）；
不透明度：1；
}
}
@-webkit为导航栏动画设置关键帧{
0% {
变换：平移（0，-60px）；
不透明度：1；
}
100% {
变换：平移（0,0）；
不透明度：1；
}
}
navbar先生{
背景色：#巴巴巴；
显示器：flex；
浮动：左；
宽度：100%；
高度：55px；
位置：相对位置；
柔性包装：nowrap；
最小宽度：500px；
盒影：0px 2px 5px#7a7a；
z指数：-2；
证明内容：中心；
}
.navbar项、.dropdown菜单项、.dropdown-sub1-menu-item{
列表样式：无；
}
.导航栏项目{
显示器：flex；
对齐项目：居中；
字体系列：“Roboto Mono”，monospace，Helvetica；
字号：17px；
}
.导航栏项目a{
显示：内联块；
填充：16px 15px；
}
.导航栏项目a：悬停{
颜色：白色；
}
.navbar项：悬停{
背景颜色：灰色；
}
.下拉菜单{
显示：无；
列表样式：无；
位置：绝对位置；
背景色：#F3；
宽度：140px；
边界半径：0px 0px 5px 5px；
顶部：56px；
盒影：0px 1px 5px灰色；
动画名称：下拉菜单动画；
动画迭代次数：1；
动画持续时间：120ms；
动画填充模式：无；
动画计时功能：线性；
动画方向：正常；
/*铬/狩猎*/
-webkit动画名称：下拉菜单动画；
-webkit动画迭代计数：1；
-webkit动画持续时间：120ms；
-webkit动画填充模式：无；
-webkit动画计时功能：线性；
-webkit动画方向：正常；
}
@关键帧下拉菜单动画{
0% {
变换：平移（0，-5px）；
不透明度：1；
}
100% {
变换：平移（0,0）；
不透明度：1；
}
}
@-webkit关键帧下拉菜单动画{
0% {
变换：平移（0，-5px）；
不透明度：1；
}
100% {
变换：平移（0,0）；
不透明度：1；
}
}
.下拉菜单项{
显示：块；
}
.下拉菜单项：悬停{
背景颜色：灰色；
}
.下拉菜单项a{
显示：块；
宽度：100%；
左侧填充：15px；
}
a、 a:参观了{
文字装饰：无；
颜色：黑色；
}
#下拉切换悬停：悬停。下拉菜单{
显示：块；
}
.下拉菜单sub1-menu{
显示：无；
位置：绝对位置；
左：139px；
顶部：-0px；
背景色：#F3；
宽度：158px；
边界半径：0px 0px 5px 0px；
盒影：0px 1px 5px灰色；
z指数：-1；
动画名称：dropdown-sub1-menu-animation；
动画迭代次数：1；
动画持续时间：120ms；
动画填充模式：无；
动画计时功能：线性；
动画方向：正常；
/*铬/狩猎*/
-webkit动画名称：dropdown-sub1-menu-animation；
-webkit动画迭代计数：1；
-webkit动画持续时间：120ms；
-webkit动画填充模式：无；
-webkit动画计时功能：线性；
-webkit动画方向：正常；
}
@关键帧下拉列表-sub1-菜单-动画{
0% {
转换：转换（-3px，0）；
不透明度：1；
}
100% {
变换：平移（0,0）；
不透明度：1；
}
}
@-webkit关键帧下拉列表-sub1-菜单-动画{
0% {
转换：转换（-3px，0）；
不透明度：1；
}
100% {
变换：平移（0,0）；
不透明度：1；
}
}
.下拉菜单-sub1-菜单项{
显示：块；
}
.下拉菜单项：悬停{
背景颜色：灰色；
}
#dropdown-sub1-menu-item1-toggle:悬停。dropdown-sub1-menu{
显示：块；
}

隆德
这里有东西








position:sticky;
position:-webkit-sticky;
top:5px;

body {
    margin-bottom:3000px; /*add scrolling to page*/
}

body {
    height:3000px; /*add scrolling to page*/
}