javascript - 在滚动条上淡化伪元素 - JS 或 jQuery

Question

我有一个伪元素，我想在滚动时淡入不透明度:0。我似乎无法理解如何去做。我在这里设置了一个codepen。 http://codepen.io/emilychews/pen/JWyaKr

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

HTML

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

CSS

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

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

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

艾米丽

Answer 1

为伪元素的opacity设置一个transition，并添加一个类到scroll上的主要元素，你在选择器中使用它来改变伪元素的不透明度.

var $mydiv = $('#mydiv');
$(window).scroll(function() {
  if ($(this).scrollTop() > 10) {
    $mydiv.addClass('fade');
  } else {
    $mydiv.removeClass('fade');
  }
})

body {
  height: 200vh;
}

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

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

#mydiv.fade:after {
  opacity: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mydiv">My Div</div>