Css 当在小屏幕上响应时，粘性下拉导航栏消失

有一个类似的问题，基于相同的学校代码 询问和回答，但我需要多一点功能

在桌面或宽屏幕上： 滚动页面时，导航栏是粘性的。下拉菜单起作用。我很高兴

在移动或窄屏幕上（当媒体查询开始时）： 粘性特性仍然有效。但是，单击汉堡菜单时，导航栏将消失。也没有下拉列表。当页面被卷回顶部时，导航栏重新出现，汉堡包开始工作

我花了一天的大部分时间尝试html和css的各种组合，但似乎都不起作用。我怀疑JS myFunction（）是罪魁祸首，但作为一个相对新手，我不知道足够的JS来解决这个问题

代码笔可以在这里查看

请帮忙。多谢各位

函数myFunction（）{
var x=document.getElementById（“myTopnav”）；
如果（x.className==“topnav”）{
x、 类名+=“响应”；
}否则{
x、 className=“topnav”；
}
}
window.onscroll=函数（）{
myFunction2（）
};
var navbar=document.getElementById（“myTopnav”）；
var sticky=navbar.offsetTop；
函数myFunction2（）{
如果（window.pageYOffset>=粘性）{
navbar.classList.add（“粘性”）；
}否则{
navbar.classList.remove（“粘性”）
}
}

正文{
保证金：0；
字体系列：Arial
}
托普纳夫先生{
溢出：隐藏；
背景色：#333；
}
.topnav a{
浮动：左；
显示：块；
颜色：#F2F2；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
字号：17px；
}
.主动{
背景色：#4CAF50；
颜色：白色；
}
.topnav.icon{
显示：无；
}
.下拉列表{
浮动：左；
溢出：隐藏；
}
.下拉菜单{
字号：17px；
边界：无；
大纲：无；
颜色：白色；
填充：12px 16px；
/*从14px到16px，与.topnav a垂直对齐*/
背景色：继承；
字体家族：继承；
保证金：0；
}
.下拉内容{
显示：无；
位置：固定；
/*绝对的；
裁判。https://stackoverflow.com/questions/46535480/position-fixed-ruins-the-dropdown-menu-in-css-webpage */
背景色：#f9f9f9；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
}
.下拉内容a{
浮动：无；
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
文本对齐：左对齐；
}
.topnav a:悬停，
.dropdown:悬停.dropbtn{
背景色：#555；
颜色：白色；
}
.下拉列表内容a：悬停{
背景色：#ddd；
颜色：黑色；
}
.下拉：悬停.下拉内容{
显示：块；
}
/*结实的部分开始*/
.标题{
填充：0 16px；
}
.内容{
填充：16px；
}
.粘的{
位置：固定；
排名：0；
宽度：100%；
}
.粘性+.内容{
填充顶部：60px；
}
/*粘性部分端部*/
@媒体屏幕和屏幕（最大宽度：600px）{
.topnav a:不是（：第一个孩子），
.下拉菜单{
显示：无；
}
.topnav a.icon{
浮动：对；
显示：块；
}
}
@媒体屏幕和屏幕（最大宽度：600px）{
.topnav{
位置：相对位置；
}
.topnav.responsive.icon{
位置：绝对位置；
右：0；
排名：0；
}
.topnav.a{
浮动：无；
显示：块；
文本对齐：左对齐；
边框底部：.05px纯白色；
/*下拉分离线*/
}
.topnav.a:n个孩子（5）{
边框顶部：.05px纯白；
}
/*下拉分离线*/
.topnav.responsive.下拉列表{
浮动：无；
}
.topnav.responsive.下拉列表内容{
位置：相对位置；
}
.topnav.responsive.dropdown.dropbtn{
显示：块；
宽度：100%；
文本对齐：左对齐；
}
}

向下滚动
向下滚动以查看粘性效果

产品
粘性导航示例
当您到达滚动位置时，导航栏将移到顶部

一些文本以启用滚动。Lorem ipsum dolor sit amet，奉献精英。我们的驱避剂是一种新型的驱避剂，可以选择暂时性的驱避剂，用于治疗老年人的致命性痴呆。
普雷森蒂姆·艾乌斯·艾乌斯·艾乌斯·艾乌斯·艾乌斯·艾乌斯·艾乌斯·艾乌斯·艾德姆·劳丹蒂姆·杜西姆斯。这是一种不必要的责任，无论在哪种情况下，都必须承担责任

一些文本以启用滚动。Lorem ipsum dolor sit amet，奉献精英。我们的驱避剂是一种新型的驱避剂，可以选择暂时性的驱避剂，用于治疗老年人的致命性痴呆。
普雷森蒂姆·艾乌斯·艾乌斯·艾乌斯·艾乌斯·艾乌斯·艾乌斯·艾乌斯·艾乌斯·艾德姆·劳丹蒂姆·杜西姆斯。这是一种不必要的责任，无论在哪种情况下，都必须承担责任

一些文本以启用滚动。Lorem ipsum dolor sit amet，奉献精英。我们的驱避剂是一种新型的驱避剂，可以选择暂时性的驱避剂，用于治疗老年人的致命性痴呆。
普雷森蒂姆·艾乌斯·艾乌斯·艾乌斯·艾乌斯·艾乌斯·艾乌斯·艾乌斯·艾乌斯·艾德姆·劳丹蒂姆·杜西姆斯。这是一种不必要的责任，无论在哪种情况下，都必须承担责任

一些文本以启用滚动。Lorem ipsum dolor sit amet，奉献精英。我们的驱避剂是一种新型的驱避剂，可以选择暂时性的驱避剂，用于治疗老年人的致命性痴呆。
普雷森蒂姆·艾乌斯·艾乌斯·艾乌斯·艾乌斯·艾乌斯·艾乌斯·艾乌斯·艾乌斯·艾德姆·劳丹蒂姆·杜西姆斯。这是一种不必要的责任，无论在哪种情况下，都必须承担责任

一些文本以启用滚动。Lorem ipsum dolor sit amet，奉献精英。我们的驱避剂是一种新型的驱避剂，可以选择暂时性的驱避剂，用于治疗老年人的致命性痴呆。
普雷森蒂姆·艾乌斯·艾乌斯·艾乌斯·艾乌斯·艾乌斯·艾乌斯·艾乌斯·艾乌斯·艾德姆·劳丹蒂姆·杜西姆斯。罪责
@media screen and (max-width: 600px) {
  .topnav.responsive.sticky {
    position: fixed;
  }
}