Javascript 淡入scroll-JS或jQuery上的伪元素

我有一个伪元素，我想淡入不透明度：0的滚动。我似乎不知道该怎么做，也不知道该怎么做。我在这里设置了密码笔

通常我会使用Greensock，但在这个项目上我不能。我还必须使用伪元素，而不是绝对定位的div。淡入淡出需要在从顶部滚动10px后发生，然后在用户滚动回到顶部时返回（它是导航元素的一部分）

HTML

任何想法都会很棒。我觉得自己不是快要哭了，就是沮丧地吃了一桶炸鸡

---

Emily

为伪元素上的

不透明度

设置一个

转换

，并向滚动条上的主元素添加一个类，您可以在选择器中使用该类更改伪元素上的不透明度

var$mydiv=$（'#mydiv'）；
$（窗口）。滚动（函数（）{
如果（$（this）.scrollTop（）>10）{
$mydiv.addClass（'fade'）；
}否则{
$mydiv.removeClass（'fade'）；
}
})

正文{
高度：200vh；
}
#mydiv{
背景：红色；
宽度：10%；
}
#mydiv:之后{
内容：''；
位置：绝对位置；
身高：10%；
宽度：10%；
顶部：30px；
背景：黑色；
过渡：不透明度.25s；
}
#mydiv.fade：之后{
不透明度：0；
}

我的Div

<div id="mydiv">My Div</div>

#mydiv {
    background: red;
    width: 10%;
}

#mydiv:after {
    content: '';
    position: absolute;
    height: 10%;
    width: 10%;
    top: 30px;
    background: black;
}