Javascript 导航覆盖汉堡菜单单击问题

我构建了一个汉堡包导航，当点击时，它会将导航元素覆盖在全屏彩色背景上

我有几个小错误，我无法找出我的错误，或者如何纠正它们

当你点击汉堡包图标并显示覆盖图时，如果你点击背景色上的任何地方，覆盖图就会关闭。除非单击了链接或“关闭”图标/按钮，否则如何保持覆盖图可见

单击链接时，覆盖将消失（如预期的那样），但在瞬间再次返回。如何在单击时停止此“闪烁”，以便在加载新页面之前保持覆盖显示，或在单击后隐藏覆盖显示

$（文档）.ready（函数（）{
$（“.menu btn a”）。单击（函数（）{
var scroll=$（窗口）.scrollTop（）；
$（“.overlay”）.fadeToggle（200）；
$（this.toggleClass（'btn-open'）。toggleClass（'btn-close'）；
if（$（this）.hasClass（'btn-close'））{
$（“.navbar”）.css（“背景色”、“灰色”）；
}否则如果（滚动>100）{
$（“.navbar”）.css（“背景色”，“CEB400”）；
}
});
$（'.overlay'）。在（'click'，function（）上{
$（“.overlay”）.fadeToggle（200）；
$（“.menu btn a”）.toggleClass（'btn-open'）.toggleClass（'btn-close'）；
});
$（'.menu a'）。在（'单击'，函数（）上）{
$（“.overlay”）.fadeToggle（200）；
$（“.menu btn a”）.toggleClass（'btn-open'）.toggleClass（'btn-close'）；
});
});
$（文档）.ready（函数（）{
$（窗口）。滚动（函数（）{
var scroll=$（窗口）.scrollTop（）；
如果（滚动>100）{
如果（$（'.overlay:visible'）。长度==0）{
$（“.navbar”）.css（“背景色”，“CEB400”）；
}
}否则{
$（“.navbar”）.css（“背景色”、“灰色”）；
}
});
});
/*打开/关闭基站*/
.菜单btn{
z指数：999；
显示：内联；
/*字体大小：32px*/
}
.菜单btn a{
显示器：flex；
文字装饰：无；
颜色：#ffffff；
/*狩猎黑客*/
对齐项目：居中；
}
.btn打开：之后{
颜色：继承；
内容：“\f394”；
字体系列：“Ionicons”；
-webkit转换：所有.2s线性0；
-moz转变：所有.2s线性0；
-o-过渡：所有0.2s线性；
转换属性：所有.2s线性0；
字体大小：40px；
}
.btn打开：悬停：之后{
颜色：继承；
}
.btn关闭：之后{
颜色：继承；
内容：“\f2d7”；
字体系列：“Ionicons”；
-webkit转换：所有.2s线性0；
-moz转变：所有.2s线性0；
-o-过渡：所有0.2s线性；
转换属性：所有.2s线性0；
字体大小：40px；
}
.btn关闭：悬停：之后{
颜色：#ffffff；
}
.template home.btn打开：在，
.template home.btn打开：悬停：之后，
.template home.btn关闭：在，
.template home.btn关闭：悬停：之后，
.模板主页.菜单btn a跨度{
颜色：#ffffff！重要；
}
/*覆盖层*/
.覆盖{
位置：固定；
排名：0；
z指数：99；
显示：无；
溢出：自动；
宽度：100%；
身高：100%；
背景：rgba（209180,0）；
}
.叠加.菜单{
利润率：150px 20px；
/*宽度：80%*/
}
.覆盖.菜单ul{
保证金：0；
填充：0；
宽度：100%；
}
.覆盖.菜单ul li{
浮动：左；
填充：6px0；
宽度：100%；
列表样式：无；
文本对齐：左对齐；
文本转换：大写；
}
.overlay.menu ul li#social{
宽度：100%；
边缘顶部：50px；
}
.覆盖.菜单ul li a{
颜色：#d1b400；
字体大小：300；
字体大小：20px；
字体系列：“旧标准TT”，衬线；
}
.overlay.menu ul li#social a{}
.覆盖.菜单ul{
边缘顶部：20px；
}
.overlay.菜单ul li{
位置：相对位置；
浮动：无；
利润率：10px0；
宽度：100%；
边界：0；
}
.覆盖.菜单ul li a{
颜色：#fff；
文本转换：大写；
字体大小：300；
字体大小：30px；
}
.overlay.menu ul li a:悬停{
颜色：#000000；
}
/*响应的*/
@媒体屏幕和屏幕（最大宽度：768px）{
.覆盖.菜单ul li{
浮动：无；
边缘底部：25px；
宽度：100%；
}
.覆盖.菜单ul li:最后一个孩子{
边界：0；
}
.覆盖.菜单ul{
边缘顶部：20px；
}
.菜单btn{
右：25px；
}
}
.例如{
位置：绝对位置；
底部：0；
字号：18px；
字体大小：粗体；
宽度：100%；
文本对齐：居中；
背景：#e9e9e9；
填充：20px；
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
颜色：#333；
位置：固定；
}
.社交菜单{
显示：内联块；
边缘：0.4em；
}
.社交菜单a{
宽度：44px；
高度：44px；
填充：0；
背景图像：url（“../img/cd socials.svg”）；
背景重复：无重复；
/*图像替换*/
溢出：隐藏；
文本缩进：100%；
空白：nowrap；
}
.菜单社交.菜单facebook a{
背景位置：0；
}
.菜单社交.菜单instagram a{
背景位置：-44px 0；
}
.菜单社交菜单运球a{
背景位置：-88px 0；
}
.菜单社交.菜单推特a{
背景位置：-132px 0；
}
.overlay.menu ul li.说明{
填充：0px 0 10px 0px；
}
.overlay.menu ul li.description span{
颜色：#000000；
字体大小：13px；
字体大小：300；
文本转换：无；
}
p、 电话：，
p、 电子邮件{
利润率：0.3px 0；
}
p、 电话a{
颜色：#fff！重要；
字体重量：300！重要；
字体大小：20px！重要；
字母间距：1px；
}
p、 发电子邮件给{
颜色：#fff！重要；
字体重量：300！重要；
字体大小：20px！重要；
文本转换：无；
}
.菜单btn a跨度{
字体大小：16px；
颜色：#ffffff；
/*线高：18px*/
字号：600；
位置：相对位置；
/*顶部：-5px*/
右：10px；
}
.navbar文本分区{
显示：内联块；
颜色：#ffffff；
字体大小：16px；
字号：600；
}
.标题联系svg{
左边距：10px；
字体大小：22px；
}
.标题联系人{
右边距：75px；
}
.标题联系人a{
颜色：#ffffff；
}
.标题联系人{
字体重量：600！重要；
字体大小：16px！重要；
}
navbar先生{
-webkit转换：ba
$('.overlay').on('click', function () {
    $(".overlay").fadeToggle(200);
    $(".menu-btn a").toggleClass('btn-open').toggleClass('btn-close');
});

$('.overlay').on('click', function() {
    $(".overlay").fadeToggle(200);
    $(".menu-btn a").toggleClass('btn-open').toggleClass('btn-close');
});