Javascript 带有滚动效果的粘性导航栏不显示'；当浏览器在代码笔上工作时，它不能在浏览器上工作

我正试图在我的网站上添加一个粘性导航条，当我向下滚动到某个特定点后，它就会生效。我知道位置是如何工作的，我坚持得很好。但问题是，当我尝试使用JS和JQuery向下滚动时，它并没有被卡住。我提到了一个图坦卡蒙同样的事情，碰巧看到一个“codepen.io”上的代码以及。但当我在我的电脑和浏览器上尝试同样的代码时，它也不起作用。奇怪的是，相同的代码可以在jsfiddle.net和codepen.io上运行，但当我用记事本++尝试时，它根本不起作用。我不知道我在哪里犯错

这是我的代码的粘贴库>>

这里是JSFIDLE链接>>

粘性导航栏
var mn=$（“.main nav”）；
mns=“主导航已滚动”；
hdr=$（'header'）.height（）；
$（窗口）。滚动（函数（）{
if（$（this）.scrollTop（）>hdr）{
mn.addClass（mns）；
}否则{
移除类（mns）；
}
});
*{
框大小：边框框；
}
身体{
保证金：0；
填充顶部：250px；
}
标题{
高度：300px；
填充顶部：50px；
背景#f07057；
}
.主导航，
梅因先生{
位置：相对位置；
}
.主导航{
背景：#fff；
高度：80px；
z指数：150；
边缘底部：-80px；
盒影：0 2px 3px rgba（0,0,0,4）；
}
标题，
.主导航已滚动{
位置：固定；
宽度：100%；
排名：0；
}
梅因先生{
背景#f2e8；
填充：110px 50px 50px；
列数：2；
柱间距：40px；
}
这是一个粘性导航演示！
创建其中一个也没那么糟糕。让我们学习如何使用这个可爱的小演示

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet，是一位杰出的献身者。埃尼安·弗林蒂利亚，波尔蒂托·佩伦茨克的珀鲁斯，埃拉·阿库·廷西蒙特·迪亚姆，萨皮恩的达皮布斯·福西布斯·利奥·莫里斯。在针叶或车辆中。我们的生活很愉快，我们的设施很好，我们的身体很好。Nam elementum tellus vitae孕妇发酵液。纳勒姆和利奥。整数ut euismod lorem，在lacus的位置。库拉比图尔·比本杜姆（Curabitur bibendum）是一个商业区。这是一个很小的问题。南维塔弗林利亚尼布。他是一个很好的朋友

普雷森特欧盟埃尼姆非马萨佩伦茨克洛博蒂斯。在射手座多洛。无按摩的阿利夸。这是一个很好的例子，包括孕妇、调味品和调味品、威尼斯人和多洛人。在乌拉姆科珀利奥乌尔特里希斯的一家酒店里，一对一的酒后驾车。紫荆花位于前庭的中间

这是一个自然的社会，是一个产期不长的国家。在iaculis pharetra odio中，坐着的是一位杰出的设施专家，他是一位真正的同侧三体专家。请不要把它放在一边。不喝苏打水，我的生命，狮子座。这是一种生命的精华。做一个按摩、一个按摩、一个按摩、一个按摩。人马是最聪明的，坐在那里的是一只不安分的乌龟。我坐在那里，我的舌苔，我的爱，我的爱。埃涅·康瓦利斯（Aenean convallis ante purus），ac bibendum orci laoreet ac.Donec a convallis mauris。非空白非同侧颞前。在hac habitasse Plateum，一句名言。埃尼安在伊普苏姆瓦普塔特，两个射手座，法雷特拉内克。Nam eget sodales orci。nisl Pellentsque的Aliquam pharetra nunc，nec fringilla enim iaculis

Lorem ipsum dolor sit amet，是一位杰出的献身者。埃尼安·弗林蒂利亚，波尔蒂托·佩伦茨克的珀鲁斯，埃拉·阿库·廷西蒙特·迪亚姆，萨皮恩的达皮布斯·福西布斯·利奥·莫里斯。在针叶或车辆中。我们的生活很愉快，我们的设施很好，我们的身体很好。Nam elementum tellus vitae孕妇发酵液。纳勒姆和利奥。整数ut euismod lorem，在lacus的位置。库拉比图尔·比本杜姆（Curabitur bibendum）是一个商业区。这是一个很小的问题。南维塔弗林利亚尼布。他是一个很好的朋友

普雷森特欧盟埃尼姆非马萨佩伦茨克洛博蒂斯。在射手座多洛。无按摩的阿利夸。这是一个很好的例子，包括孕妇、调味品和调味品、威尼斯人和多洛人。在乌拉姆科珀利奥乌尔特里希斯的一家酒店里，一对一的酒后驾车。紫荆花位于前庭的中间

这是一个自然的社会，是一个产期不长的国家。在iaculis pharetra odio中，坐着的是一位杰出的设施专家，他是一位真正的同侧三体专家。请不要把它放在一边。不喝苏打水，我的生命，狮子座。这是一种生命的精华。做一个按摩、一个按摩、一个按摩、一个按摩。人马是最聪明的，坐在那里的是一只不安分的乌龟。我坐在那里，我的舌苔，我的爱，我的爱。埃涅·康瓦利斯（Aenean convallis ante purus），ac bibendum orci laoreet ac.Donec a convallis mauris。非空白非同侧颞前。在hac habitasse Plateum，一句名言。埃尼安在伊普苏姆瓦普塔特，两个射手座，法雷特拉内克。Nam eget sodales orci。nisl Pellentsque的Aliquam pharetra nunc，nec fringilla enim iaculis

我通过放置以下内容解决了问题：

<script>
    var  mn = $(".main-nav");
    mns = "main-nav-scrolled";
    hdr = $('header').height();

    $(window).scroll(function() {
        if( $(this).scrollTop() > hdr ) {
            mn.addClass(mns);
        } else {
            mn.removeClass(mns);
        }
    });
</script>

var mn=$（“.main nav”）；
mns=“主导航已滚动”；
hdr=$（'header'）.height（）；
$（窗口）。滚动（fu）
<script>
    var  mn = $(".main-nav");
    mns = "main-nav-scrolled";
    hdr = $('header').height();

    $(window).scroll(function() {
        if( $(this).scrollTop() > hdr ) {
            mn.addClass(mns);
        } else {
            mn.removeClass(mns);
        }
    });
</script>