Html 导航栏仅在滚动后显示

我已经为这个简单的页面编写了css和html。但每当我打开页面时，它不会显示导航栏，但向下滚动时，它会开始显示导航栏。我无法找出可能的原因，因为css属性表示navbar将保持透明。我使用的是bootstrap4

下面是我的一些导航栏css代码

#主导航{
盒影：0.5雷姆1雷姆rgba（0,0,0,0.15）；
背景色：rgb（93，93，93）！重要；
过渡：背景色0.2s；
}
#主导航。导航栏品牌{
字体系列：“Merriweather Sans”，-苹果系统，BlinkMacSystemFont，“Segoe UI”，Roboto，“Helvetica Neue”，Arial，“Noto Sans”，无衬线，“苹果颜色表情符号”，“Segoe UI表情符号”，“Noto颜色表情符号”；
字号：700；
颜色：#000000！重要；
}
#主导航栏导航项目导航链接{
颜色：#6c757d；
字体系列：“Merriweather Sans”，-苹果系统，BlinkMacSystemFont，“Segoe UI”，Roboto，“Helvetica Neue”，Arial，“Noto Sans”，无衬线，“苹果颜色表情符号”，“Segoe UI表情符号”，“Noto颜色表情符号”；
字号：700；
字体大小：0.9rem；
填充：0.750；
}
#主导航.导航栏导航.导航项目.导航链接：悬停，#主导航.导航栏导航.导航项目.导航链接：激活{
颜色：#0f1010！重要；
}
#主导航栏导航项目导航链接激活{
颜色：#0f1010！重要；
}
@介质（最小宽度：992px）{
#主导航{
盒影：无；
背景色：#0f1010！重要；
}
#主导航。导航栏品牌{
颜色：rgba（82,82,82,0.7）！重要；
}
#导航栏品牌：hover{
颜色：#000000！重要；
}
#主导航栏导航项目导航链接{
颜色：rgba（36,36,36,0.7）！重要；
填充：0 1rem；
}
#导航条导航项导航链接：悬停{
颜色：#000000！重要；
}
#主导航栏导航项目：最后一个子导航链接{
右边填充：0；
}
#mainNav.navbar-scrolled{
盒影：0.5雷姆1雷姆rgba（0,0,0,0.15）；
背景色：#fff；
}
#mainNav.navbar-scrolled.navbar品牌{
颜色：#212529；
}
#mainNav.navbar-滚动。navbar品牌：悬停{
颜色：#f4623a；
}
#mainNav.navbar-滚动。导航栏导航。导航项目。导航链接{
颜色：#212529；
}
#mainNav.navbar-滚动。导航栏导航。导航项目。导航链接：悬停{
颜色：#f4623a；
}
}
.集装箱{
宽度：100%；
右侧填充：15px；
左侧填充：15px；
右边距：自动；
左边距：自动；
}
@介质（最小宽度：576px）{
.集装箱{
最大宽度：540像素；
}
}
@介质（最小宽度：768px）{
.集装箱{
最大宽度：720px；
}
}
@介质（最小宽度：992px）{
.集装箱{
最大宽度：960像素；
}
}
@介质（最小宽度：1200px）{
.集装箱{
最大宽度：1140px；
}
}
.容器液体{
宽度：100%；
右侧填充：15px；
左侧填充：15px；
右边距：自动；
左边距：自动；
}

您可以使用此代码

演示
身体{
保证金：0；
背景色：#f1f1；
字体系列：Arial、Helvetica、无衬线字体；
}
#导航栏{
背景色：#333；
位置：固定；
顶部：-62px；
宽度：100%；
显示：块；
过渡：前0.3名；
}
#导航栏a{
浮动：左；
显示：块；
颜色：#F2F2；
文本对齐：居中；
填充：15px；
文字装饰：无；
字号：17px；
}
#导航栏a：悬停{
背景色：#ddd；
颜色：黑色；
}
保险商实验室{
保证金：0；
浮动：对；
}
ulli{
保证金：0；
填充：0；
列表样式类型：无；
显示：内联块；
}












Lorem ipsum dolor sit amet，是一位杰出的献身者。阿利奎姆·莫利斯·莱克图斯·乌拉姆科珀·费吉亚·特里斯蒂克。自由显贵，特级康格，特里斯蒂克·维利特。最后一刻，我的生命将永垂不朽。
这是一个温和的自由主义者。这是奥奇的权杖，但它是一种不可替代的元素。奎斯克·利奥·洛雷姆，拉奥里特坐在阿梅特·法雷特拉·瓦普塔特的位子上，不可替代。毛里斯和奥迪奥·马克西穆斯（mauris ut odio maximus feugiat）的教堂。多尼克
我是帕特·梅特斯，欧盟共通会员。伊涅阿斯的《同书》，大书中的《矢状面》，大书中的《主旨》。唐纳克·朗卡斯在鲁特鲁姆的一个酒馆。莫比·尤普鲁斯·泰勒斯。佩伦特·埃吉特·泰卢斯·阿努拉·波特·斯克利斯。别说了。塞姆珀维瓦姆斯酒店
伊尼姆·塞德·亚库利斯。乌尔纳元素。Mauris Pellentesquer erat vel magna Volpat vulputate。阿利奎姆·埃拉特·帕特。无路可走，无路可走。Lorem ipsum dolor sit amet，是一位杰出的献身者。塞德
自由女神阿利奎姆·马格纳，欧盟封建主义者里奥·奥纳雷。暂时的自由生活。Donec lacinia，orci nec venenatis vulputate，diam leo auctor magna，ac tempus sem purus a libero

//当用户从文档顶部向下滚动20px时，向下滑动导航栏
window.onscroll=函数（）{
scrollFunction（）
};
函数滚动函数（）{
如果（document.body.scrollTop>20 | | document.documentElement.scrollTop>