Javascript 导航栏的代码工作不正常

我是一个初学者，试图在一个实践网站上编写导航条，但我无法正确地获得最终产品

我的导航条应该沿页面顶部水平排列，然后在黑色阴影背景下滚动时跟随页面。当前，当您加载页面时，文字在右侧垂直排列，然后在滚动时压缩。我在左上角也有一个徽标，它缩小得太小了。最后，当你缩小页面时，右上角会弹出一个汉堡包图标，用来显示菜单选项，但它不再有效。这就像是一个循环，我修正了一件事，打破了另一件事。我这样做只是为了好玩，因为我正在努力学习，但现在我感到沮丧，谢谢

$（窗口）.on（'scroll'，function（）{
如果（$（窗口）.scrollTop（））{
$（'nav'）.addClass（'black'）；
}否则{
$（'nav'）.removeClass（'black'）；
}
})
$（文档）.ready（函数（）{
$（“.menu i”）。单击（函数（）{
$（“nav ul”）。切换类别（“活动”）
})
})

@导入url（'https://fonts.googleapis.com/css?family=Bungee|蹦极+发际线| Oswald | Raleway&display=swap'）；
身体{
保证金：0；
填充：0；
身高：100%；
宽度：100%；
}
导航{
位置：固定；
排名：0；
左：0；
宽度：100%；
高度：100px；
填充：10px 100px；
框大小：边框框；
过渡：.5s；
}
导航黑色{
背景：rgba（0,0,0,8）；
高度：80px；
填充：10px 50px；
}
导航标志{
浮动：左；
}
导航标志img{
高度：80px；
过渡：.5s；
}
导航黑色标志img{
填充：20px；
高度：60px；
}
导航ul{
浮动：对；
保证金：0；
填充：0px；
显示器：flex；
文本阴影：2PX2PX4PX000000；
}
李国荣{
列表样式：无；
}
海军ulli a{
线高：80px；
颜色：#fff；
填充：5px20px；
字体系列：“Raleway”，无衬线；
文字装饰：无；
文本转换：大写；
过渡：.5s；
}
海军黑色航空母舰{
颜色：#fff；
线高：20px；
}
nav ul li a.主动，
导航ulli a：悬停{
颜色：#fff；
背景：#008cff；
}
.响应条{
显示：无；
}
@介质（最大宽度：800px）{
.响应条{
显示：块；
宽度：100%；
高度：60px；
背景：#262626；
位置：固定；
排名：0；
左：0；
填充：5px20px；
框大小：边框框；
z指数：1；
}
.响应条.徽标img{
浮动：左；
高度：50px；
}
.响应栏.菜单一{
浮动：对；
颜色：#fff；
保证金：0；
填充：0；
线高：50px；
光标：指针；
文本转换：大写；
}
导航{
填充：60px；
}
导航黑色{
显示：无；
背景：#262626；
高度：60px；
填充：0；
}
导航标志{
显示：无；
}
导航ul{
位置：绝对位置；
宽度：100%；
排名前60名；
左：0；
背景：#262626；
浮动：无；
显示：无；
}
主动导航{
显示：块；
}
李国荣{
宽度：100%
}
海军ulli a{
显示：块；
填充：15px；
宽度：100%；
高度：60px；
文本对齐：居中；
线高：30px；
颜色：#fff；
}
}
* {
框大小：边框框；
}
梅因先生{
高度：1000px；
左侧填充：20px；
右边填充：100px；
}

您的CSS似乎没有改变

li的默认显示行为

-也许您应该解决这个问题，您还可以将li放在ul中的div中。。。这是行不通的。你的CSS似乎没有改变

li

的默认显示行为-也许你应该解决这个问题，你也可以把li放在ul中的div中。。。那是行不通的