Javascript 粘性导航栏'；s的响应取决于滚动

我已经实现了使我的网页导航栏粘性和响应，但有一个问题。在一开始，当屏幕缩小，点击汉堡包图标时，整个导航栏向左移动，当我稍微滚动页面时，它工作得非常好，为什么会发生这种情况

事业
正文，html{
身高：100%；
保证金：0；
字体系列：“蒙特塞拉特”，无衬线；
线高：150%；
颜色：#666；
文本对齐：居中；
}
/*将背景颜色添加到topnav*/
托普纳夫先生{
背景：#333；
溢出：隐藏；
z指数：1；
}
/*导航栏内的样式链接*/
.topnav a{
浮动：左；
显示：块；
颜色：#F2F2；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
字号：17px；
}
/*悬停时更改链接颜色*/
.topnav a:悬停{
背景：ddd；
颜色：黑色；
}
/*添加活动类以突出显示当前页面*/
.主动{
背景#4CAF50；
颜色：白色；
}
/*隐藏应在小屏幕上打开和关闭topnav的链接*/
.topnav.icon{
显示：无；
}
/*当屏幕宽度小于600px时，隐藏除第一个（“主页”）外的所有链接。
显示应打开和关闭topnav（.icon）的链接*/
@媒体屏幕和屏幕（最大宽度：600px）{
.topnav a:not（：第一个子项）{display:none；}
.topnav a.icon{
浮动：对；
显示：块；
}
}
/*当用户单击图标时，“responsive”类将通过JavaScript添加到topnav中。
该类使topnav在小屏幕上看起来不错（垂直显示链接，而不是水平显示链接）*/
@媒体屏幕和屏幕（最大宽度：600px）{
.topnav{
位置：固定；
}
.topnav.responsive.icon{
位置：固定；
右：0；
排名：0；
}
.topnav.a{
浮动：无；
显示：块；
文本对齐：左对齐；
}
}
/*当到达滚动位置时，sticky类将使用JS添加到导航栏中*/
.粘的{
位置：固定；
排名：0；
宽度：100%；
}
.视差1{
背景：url（“img/joinUs3.jpg”）无重复中心固定；
最小高度：80%；
}
.视差2{
背景：url（“img/notSure3.jpg”）无重复中心固定；
最小高度：60%；
}
.视差3{
背景：url（“img/culture3.jpg”）没有固定的重复中心；
最小高度：60%；
}
.视差4{
背景：url（“img/rightEmployee3.jpg”）没有固定的重复中心；
最小高度：80%；
}
.视差X1、.视差X2、.视差X3、.视差X4{
位置：相对位置；
不透明度：.8；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
}
.标题{
位置：绝对位置；
颜色：#fffaf7；
字体大小：550%；
字号：700；
最高：50%；
宽度：100%；
文本转换：大写；
字母间距：8px；
文本阴影：0 0 10px#f96f1b；
线高：1.1；
}
.标题2{
位置：绝对位置；
颜色：#fffaf7；
字体大小：250%；
字号：700；
最高：50%；
宽度：100%；
文本转换：大写；
字母间距：5px；
文本阴影：0 0 10px#f96f1b；
线高：1.1；
}
部分{
溢出：自动；
填充：50px 80px；
}
乱数假文
Lorem Ipsum只是印刷和排版行业的虚拟文本。

Lorem Ipsum很简单。
Lorem Ipsum只是印刷的虚拟文本
Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书

同侧眼线是。
乱数假文
乱数假文
乱数假文
Lorem Ipsum只是
Lorem Ipsum只是印刷和排版行业的虚拟文本。
乱数假文
乱数假文
document.addEventListener（'DOMContentLoaded'，function（）{
window.addEventListener（'scroll'，myFunctionForSticky）；
var navbar=document.getElementById（“myTopnav”）；
var sticky=navbar.offsetTop；
函数myFunctionForSticky（）{
如果（window.pageYOffset>=粘性）{
navbar.classList.add（“粘性”）；
}否则{
navbar.classList.remove（“粘性”）；
}
}
var icon=document.querySelector（“a.icon”）；
icon.addEventListener（“单击”，函数（）{
navbar.classList.toggle（“响应”）；
})
})

只需在class

上添加
宽度：100%
.topnav.responsive

在

600px

媒体宽度

@media screen and (max-width: 600px) {
.topnav.responsive {
    position: fixed;
    width: 100%;
}
}

---

您需要将宽度：100%设置为class.topnav

.topnav {
    background: #333;
    overflow: hidden;
    z-index: 1;
    width: 100%; /*newly added*/
}

---

如果没有一个工作片段，很难找到问题@毗湿奴我已经添加了工作片段。如果你发现问题，请告诉我。你能用这个检查一下吗？它成功了！谢谢成功了！谢谢