Javascript 修复了折叠视图中切换时css导航栏消失的问题

我有一个css菜单，它固定在滚动页面的顶部。它工作正常，直到菜单被折叠，我试图打开菜单，同时从页面顶部滚动。当我在滚动时切换折叠时，菜单会消失并弹出

我如何使用纯css/javascript解决这个问题

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

.topNavInput{
浮动：左；
填充顶部：20px；
宽度：55%；
左侧填充：15px；
}
.topnav#nava标志：悬停{
背景色：#333；
}
.topnav#nava标志{
浮动：左；
填充物：5px；
}
.topnav跨距{
边框：1px实心；
填充：10px；
}
托普纳夫先生{
溢出：隐藏；
背景色：#333；
}
.topnav.bar{
宽度：28px；
高度：4px；
背景色：白色；
利润：3倍4倍；
}
.topnav a{
浮动：对；
显示：块；
颜色：#F2F2；
文本对齐：居中；
填充：26px 16px；
文字装饰：无；
字号：17px；
}
.topnav a:悬停{
背景色：#d00b1b；
}
.粘的{
位置：固定；
排名：0；
宽度：100%；
z指数：100；
}
.topnav.collapseIcon{
显示：无；
}
@媒体屏幕和屏幕（最大宽度：600px）{
.topnav a:不是（：第一个孩子）{
显示：无；
}
.topnav跨距{
边界：无；
填充：0px！重要；
}
.topNavInput{
显示：无；
}
顶置导航{
浮动：对；
显示：块；
}
}
@媒体屏幕和屏幕（最大宽度：600px）{
.topnav{
位置：相对位置；
}
梅努特姆先生{
宽度：100%；
}
.topnav.responsive#nava标志{
浮动：无；
}
.topnav#nava标志{
浮动：左；
边缘顶部：10px；
左边距：14px；
}
.topnav.responsive.collapseIcon{
位置：绝对位置；
右：0；
排名：0；
}
.topnav.a{
浮动：无；
显示：块；
文本对齐：左对齐；
}
}
.伪造内容{
高度：1000px；
}

window.onscroll=function（）{stickyFunction（）}；
var navbar=document.getElementById（“topNavBar”）；
var sticky=navbar.offsetTop；
函数stickyFunction（）{
如果（window.pageYOffset>=粘性）{
navbar.classList.add（“粘性”）
}否则{
navbar.classList.remove（“粘性”）；
}
}
函数menuExpand（）{
var x=document.getElementById（“topNavBar”）；
如果（！x.classList.contains（“responsive”））{
x、 类列表。添加（“响应”）；
}否则{
x、 类列表。删除（“响应”）；
}
}

.topNavInput{
浮动：左；
填充顶部：20px；
宽度：55%；
左侧填充：15px；
}
.topnav#nava标志：悬停{
背景色：#333；
}
.topnav#nava标志{
浮动：左；
填充物：5px；
}
.topnav跨距{
边框：1px实心；
填充：10px；
}
托普纳夫先生{
溢出：隐藏；
背景色：#333；
}
.topnav.bar{
宽度：28px；
高度：4px；
背景色：白色；
利润：3倍4倍；
}
.topnav a{
浮动：对；
显示：块；
颜色：#F2F2；
文本对齐：居中；
填充：26px 16px；
文字装饰：无；
字号：17px；
}
.topnav a:悬停{
背景色：#d00b1b；
}
.粘的{
位置：固定；
排名：0；
宽度：100%；
z指数：100；
}
.topnav.collapseIcon{
显示：无；
}
@媒体屏幕和屏幕（最大宽度：600px）{
托普纳夫先生{
填充：20px 0px
}
.topnav.collapseIcon{
显示：块；
左边距：自动；
右边距：20px；
宽度：28px}
.topnav a:不是（：第一个孩子）{
显示：无；
}
.topnav跨距{
边界：无；
填充：0px！重要；
}
.topNavInput{
显示：无；
}
@媒体屏幕和屏幕（最大宽度：600px）{
梅努特姆先生{
宽度：100%；
}
.topnav.responsive#nava标志{
浮动：无；
}
.topnav#nava标志{
浮动：左；
显示：无；
边缘顶部：10px；
左边距：14px；
}
.topnav.a{
浮动：无；
显示：块；
文本对齐：左对齐；
}
}

window.onscroll=function（）{stickyFunction（）}；
var navbar=document.getElementById（“topNavBar”）；
var sticky=navbar.offsetTop；
函数stickyFunction（）{
如果（window.pageYOffset>=粘性）{
navbar.classList.add（“粘性”）
}否则{
navbar.classList.remove（“粘性”）；
}
}
函数menuExpand（）{
var x=document.getElementById（“topNavBar”）；
如果（！x.classList.contains（“responsive”））{
x、 类列表。添加（“响应”）；
}否则{
x、 类列表。删除（“响应”）；
}
}

.topNavInput{
浮动：左；
填充顶部：20px；
宽度：55%；
左侧填充：15px；
}
.topnav#nava标志：悬停{
背景色：#333；
}
.topnav#nava标志{
浮动：左；
填充物：5px；
}
.topnav跨距{
边框：1px实心；
填充：10px；
}
托普纳夫先生{
溢出：隐藏；
背景色：#333；
}
.topnav.bar{
宽度：28px；
高度：4px；
背景色：白色；
利润：3倍4倍；
}
.topnav a{
浮动：对；
显示：块；
颜色：#F2F2；
文本对齐：居中；
填充：26px 16px；
文字装饰：无；
字号：17px；
}
.topnav a:悬停{
背景色：#d00b1b；
}
.粘的{
位置：固定；
排名：0；
宽度：100%；
z指数：100；
}
.topnav.collapseIcon{
显示：无；
}
@媒体屏幕和屏幕（最大宽度：600px）{
托普纳夫先生{
填充：20px 0px
}
.topnav.collapseIcon{
显示：块；
左边距：自动；
右边距：20px；
宽度：28px}
.topnav a:不是（：第一个孩子）{
显示：无；
}
.topnav a s