Javascript 无法使我的主导航作为粘性导航执行

我已经为我正在进行的这个自我项目创建了一个实用工具和主导航栏，我希望当我滚动42px时，主导航栏会变得粘滞

但是，当我滚动时，导航栏不会停留在窗口顶部。我用实用导航对它进行了测试，效果非常好。这是我对主导航条的编码

$window.onscroll，函数{ var distanceScrolled=$window.scrollTop； console.log滚动的距离为：+distance滚动； ifdistanceScrolled>42{ $main-nav.addClassscrolled； } 否则{ $main-nav.removeclass已滚动； } }; 主导航{ 位置：相对位置； 宽度：100%； 高度：100px； 背景色：000000； } .主导航左{ 列表样式：无； 浮动：左； 左侧填充：28px； 高度：100px； } .主要导航项目{ 位置：绝对位置； 最高：40%； 左：290px； 列表样式：无； 文字装饰：无； } .主要导航项目李{ 显示：内联块； 右侧填充：12px； 右边距：13px； } .主导航右李{ 浮动：对； 右侧填充：12px； 右边距：26px； 边缘顶端：40px； 列表样式：无； } 主导航a{ 文字装饰：无； 颜色：ffffff； } .滚动{ 位置：固定； 排名：0； z指数：1000； }

---

首先，没有为html nav元素定义“nav”类。因此，在jQuery选择器中，您需要按照您定义的idmain nav或HTML nav元素本身进行选择。您可以这样做：

if(distanceScrolled>42){
        $("nav").addClass("scrolled");
    }

    else{
        $("nav").removeClass("scrolled");
}

或

但是在自定义脚本之前添加jQuery库文件

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous">
</script>

或

编写深度CSS选择，使其优先级高于Id。例如：

#main-nav.scrolled {
    position:fixed;
    top: 0;
    z-index: 1000;
}

---

两者都会起作用

您还没有将jQuery添加到代码段中，从语法来看，这似乎是一项要求，控制台中的错误：uncaughtreferenceerror:$未定义。要将jQuery添加到HTML文件，请在head部分中添加：您是否考虑过只使用docs:，？我忘了将脚本标记添加到代码段中。我的HTML中有两个脚本标记：我在主nav标记周围添加了一个div，并在JS中调用了它。它可以工作，但导航栏会改变。

.scrolled{
    position:fixed!important;
    top: 0;
    z-index: 1000;
    }

#main-nav.scrolled {
    position:fixed;
    top: 0;
    z-index: 1000;
}