Javascript 如何在同一页上有两个导航栏

我在一页上有两个导航栏。一个是图像上方的导航栏，另一个是下拉导航栏。调整页面大小时，我希望图像上方的导航栏消失，并显示下拉列表。然而，它的最终结果是图像上方的导航栏位于下拉导航栏的顶部。不知道如何改变

我创建了以下代码段来展示我的问题：

/*下拉菜单\u导航栏开始*/
//当用户从文档顶部向下滚动134px时，向下滑动导航栏
window.onscroll=函数（）{
scrollFunction（）
};
函数滚动函数（）{
if（document.body.scrollTop>134 | | document.documentElement.scrollTop>134）{
document.getElementById（“navbar”）.style.top=“0”；
}否则{
document.getElementById（“navbar”）.style.top=“-50px”；
}
}
/*下拉菜单导航栏结束*/
函数myFunction（）{
var x=document.getElementById（“navbar”）；
如果（x.className==“导航栏右侧”）{
x、 类名+=“响应”；
}否则{
x、 className=“导航栏右侧”；
}
}

/*下拉导航*/
#myTopnav.icon{
显示：无；
}
#导航栏{
背景色：rgb（23,23,23）；
位置：固定；
顶部：-50px；
宽度：100%；
显示：块；
过渡：前0.3名；
}
#导航栏a{
浮动：左；
显示：块；
颜色：#F2F2；
文本对齐：居中；
填充：15px；
文字装饰：无；
字号：17px；
}
/*.navbar右{
浮球：对
} */
#导航栏a：悬停{
背景色：#ddd；
颜色：黑色；
}
#navbar a.active{/*修复，因为这不起作用*/
背景色：rgb（40129202）；
颜色：#ddd；
}
/*导航条启动响应*/
@媒体屏幕和屏幕（最大宽度：600px）{
#导航栏a:非（：第一个子项）{
显示：无；
}
#导航栏图标{
浮动：对；
显示：块；
}
}
@媒体屏幕和屏幕（最大宽度：600px）{
#导航栏{
位置：相对位置；
}
#navbar.responsive.icon{
位置：绝对位置；
右：0；
排名：0；
}
#导航栏{
浮动：无；
显示：块；
文本对齐：左对齐；
}
}
/*下拉导航*/
/*导航条覆盖图像*/
身体{
字体系列：Arial、Helvetica、无衬线字体；
保证金：0；
}
* {
框大小：边框框；
}
.topnav a.active{
背景色：rgb（40129202）；
颜色：白色；
} 
.bg img{
/*使用的图像*/
背景图片：url（“../images/numbers-01.jpg”）；
/*最小高度：380px*/
最小高度：480px；
/*将图像居中并精确缩放*/
背景位置：中心；
背景重复：无重复；
背景尺寸：封面；
/*需要定位导航栏*/
位置：相对位置；
}
/*将导航栏容器放置在图像中*/
.导航集装箱图像{
位置：绝对位置；
利润率：90像素；
宽度：自动；
}
/*导航栏*/
托普纳夫先生{
溢出：隐藏；/*删除以删除背景*/
背景色：rgb（23,23,23）；
}
/*导航栏链接*/
.topnav a{
浮动：左；
颜色：#F2F2；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
字号：17px；
}
.topnav a:悬停{
背景色：#ddd；
颜色：黑色；
}
@媒体屏幕和屏幕（最大宽度：600px）{
.nav容器映像{
宽度：200px；/*更改图像上导航栏的宽度*/
}
}
/*图像上方的导航栏*/

此示例演示了当用户开始滚动页面时如何向下滑动导航栏

向下滚动此帧以查看效果

滚动到顶部以隐藏导航栏

Lorem ipsum door dummy text sit amet，concetetur adipiscing elit，sed do eiusmod temporal incident ut laboure and dolore magna aliqua。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡

像这样的东西应该可以完成这项工作：

function  hideMenu () {

   if (window.width < 768) { 
       document.getElementByClassName("topnav").style.display = "none";
   }
}

函数hideMenu（）{
如果（窗口宽度<768）{
document.getElementByClassName（“topnav”）.style.display=“无”；
}
}

为了保留问题的长期价值，您的代码应该在问题本身中，而不仅仅是链接到场外。当链接处的代码更改或链接本身失效时会发生什么情况？你的问题对未来的读者来说将毫无用处。请直接在问题中插入你的代码。你好，艾米，谢谢你的评论。然而，我试图添加代码，但它不会被接受，因此链接到Codepen