Javascript 如何在元素到达某个点后添加类？

我知道这个问题已经被问了一千次了，但我无法让它起作用。 我正在尝试在页面被滚动500像素后显示一个旁白。 我对javascript相当陌生，所以我不确定自己在做什么。任何有助于这项工作将是伟大的

$window.scrollfunction{ //找到类为“active”的id并将其删除 $.work-col-1-2.removeClassvisible； //获取窗口已滚动的数量 var scroll=$window.scrollTop； //根据滚动量将“活动”类添加到正确的id

---

如果滚动可能您有更改

if (scroll <= 500) {
   $(".work-col-1-2").addClass("visible");
}

---

还有两个脚本标记。删除一个。

您有两个类，.work-col-1-2和.work-col-1-2.visible 如果要添加名为visible的类，则应仅使用名为visible的类

.work-col-1-2 {
position: fixed;
right: 6%;
top: 0;
width: 25%;
padding: 1%;
margin: 0;
display: inline-block;
box-sizing: border-box;
z-index: -1;
visibility: hidden;
}

.visible {
visibility: visible;
}

您的代码很好，但正在查找具有类名的对象。work-col-1-2，然后添加找不到的可见类。因此更改类名应该可以做到这一点。

在html中更改

id="work-col-1-2" to class="work-col-1-2"

---

下面是一个工作示例。所有选择器都是错误的。您必须使用as id选择器和.as类选择器

$window.scrollfunction{ //找到类为“active”的id并将其删除 $work-col-1-2.removeClassvisible； //获取窗口已滚动的数量 var scroll=$window.scrollTop； //根据滚动量将“活动”类添加到正确的id 如果滚动>=500{ $work-col-1-2.addClassvisible； } }; work-col-1-2{ 位置：固定； 右：6%； 排名：0； 宽度：25%； 填充：1%； 保证金：0； 显示：内联块； 框大小：边框框； z指数：-1； 可见性：隐藏； } work-col-1-2.visible{ 能见度：可见； } 容器{高度：1000px} 文本在这里

---

您是否有任何错误或为什么您认为您的脚本不工作您有两个脚本标记。删除一个

id="work-col-1-2" to class="work-col-1-2"