Javascript 粘性响应移动汉堡菜单不会显示

我有一个粘性响应的移动汉堡菜单，如果我在页面的顶部，我必须点击两次，让它按下下面的文本，然后打开。当我滚动并停在中间页面的某个地方并试图打开它时，整个topnav栏消失，当我开始滚动时又会出现，但它从不展开，显示其他链接

功能响应（）{
var x=document.getElementById（“myTopnav”）；
如果（x.className==“topnav”）{
x、 类名+=“响应”；
}否则{
x、 className=“topnav”；
}
}
//当用户滚动页面时，执行myFunction
window.onscroll=function（）{myFunction（）}；
//获取myTopnav
var myTopnav=document.getElementById（“myTopnav”）；
//获取myTopnav的偏移位置
var sticky=myTopnav.offsetTop；
//当到达myTopnav的滚动位置时，将sticky类添加到myTopnav。离开滚动位置时移除“粘性”
函数myFunction（）{
如果（window.pageYOffset>=粘性）{
myTopnav.classList.add（“粘性”）
}否则{
myTopnav.classList.remove（“粘性”）；
}
}

.sticky{
位置：固定；
排名：0；
宽度：100%；
z指数：5；
}
托普纳夫先生{
背景色：#005E7B；
溢出：隐藏；
z指数：5；
字体大小：粗体；
}
/*设置导航栏内链接的样式*/
.topnav a{
浮动：左；
显示：块；
颜色：#F2F2；
文本对齐：居中；
填料：0.875em 1em；
文字装饰：无；
字号：1.0625em；
}
/*隐藏应在小屏幕上打开和关闭topnav的链接*/
.topnav.icon{
显示：无；
}
/*下拉列表容器-需要定位下拉列表内容*/
.下拉列表{
浮动：左；
溢出：隐藏；
}
/*设置下拉按钮的样式以适合topnav内部*/
.下拉菜单{
字号：1.0625em；
边界：无；
大纲：无；
颜色：白色；
填料：0.875em 1em；
背景色：继承；
字体家族：继承；
保证金：0；
}
/*设置下拉内容的样式（默认情况下隐藏）*/
.下拉内容{
显示：无；
位置：固定；
背景色：#f9f9f9；
最小宽度：10em；
盒影：0px 0.5em 1em 0px rgba（0,0,0,0.2）；
z指数：1；
字体大小：正常；
}
/*设置下拉列表中链接的样式*/
.下拉内容a{
浮动：无；
颜色：黑色；
填料：0.75em 1em；
文字装饰：无；
显示：块；
文本对齐：左对齐；
}
@媒体屏幕和屏幕（最大宽度：600px）{
.topnav a:不是（：第一个孩子），.dropdown.dropbtn{
显示：无；
}
.topnav a.icon{
浮动：对；
显示：块；
}
.topnav{
位置：固定；
显示：块；
宽度：100%；
z指数：999；
}
.topnav.a.图标{
位置：绝对位置；
右：0；
排名：0；
}
.topnav.a{
浮动：无；
显示：块；
文本对齐：左对齐；
}
.topnav.responsive.dropdown{float:none；}
.topnav.responsive.下拉列表内容{位置：相对；}
.topnav.responsive.dropdown.dropbtn{
显示：块；
宽度：100%；
文本对齐：左对齐；
}

例子

您所有的HTML、CSS和JS都是正确的，您的

responsive（）

函数中有一个小错误，您在导航上错误地切换

.responsive

类，我在下面修复了这个错误：

函数响应（）{
var x=document.getElementById（“myTopnav”）；
x、 切换（'responsive'）；
}
//当用户滚动页面时，执行myFunction
window.onscroll=function（）{myFunction（）}；
//获取myTopnav
var myTopnav=document.getElementById（“myTopnav”）；
//获取myTopnav的偏移位置
var sticky=myTopnav.offsetTop；
//当您到达myTopnav的滚动位置时，将sticky类添加到myTopnav。当您离开滚动位置时，删除“sticky”
函数myFunction（）{
如果（window.pageYOffset>=粘性）{
myTopnav.classList.add（“粘性”）
}否则{
myTopnav.classList.remove（“粘性”）；
}
}

正文{
/*为主体添加了长高度，使其可滚动*/
高度：800px；
}
.粘的{
位置：固定；
排名：0；
宽度：100%；
z指数：5；
}
托普纳夫先生{
背景色：#005E7B；
溢出：隐藏；
z指数：5；
字体大小：粗体；
}
/*设置导航栏内链接的样式*/
.topnav a{
浮动：左；
显示：块；
颜色：#F2F2；
文本对齐：居中；
填料：0.875em 1em；
文字装饰：无；
字号：1.0625em；
}
/*隐藏应在小屏幕上打开和关闭topnav的链接*/
.topnav.icon{
显示：无；
}
/*下拉列表容器-需要定位下拉列表内容*/
.下拉列表{
浮动：左；
溢出：隐藏；
}
/*设置下拉按钮的样式以适合topnav内部*/
.下拉菜单{
字号：1.0625em；
边界：无；
大纲：无；
颜色：白色；
填料：0.875em 1em；
背景色：继承；
字体家族：继承；
保证金：0；
}
/*设置下拉内容的样式（默认情况下隐藏）*/
.下拉内容{
显示：无；
位置：固定；
背景色：#f9f9f9；
最小宽度：10em；
盒影：0px 0.5em 1em 0px rgba（0,0,0,0.2）；
z指数：1；
字体大小：正常；
}
/*设置下拉列表中链接的样式*/
.下拉内容a{
浮动：无；
颜色：黑色；
填料：0.75em 1em；
文字装饰：无；
显示：块；
文本对齐：左对齐；
}
@媒体屏幕和屏幕（最大宽度：600px）{
.topnav a:不是（：第一个孩子），
.下拉菜单{
显示：无；
}
.topnav a.icon{
浮动：对；
显示：块；
}
.topnav{
位置：固定；
显示：块；
宽度：100%；
z指数：999；
}
.topnav.a.图标{
位置：绝对位置；
右：0；
排名：0；
}
.topnav.a{
浮动：无；
显示：块；
文本对齐：左对齐；
}
.topnav.responsive.下拉列表{
浮动：无；
}