在滚动时淡入伪元素 - JS 或 jQuery答案

【问题标题】：Fade a Pseudo Element on scroll - JS or jQuery在滚动时淡入伪元素 - JS 或 jQuery
【发布时间】：2017-08-05 13:25:53
【问题描述】：

我有一个伪元素，我想在滚动时淡化为 opacity: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;
}

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

艾米丽

【问题讨论】：

标签： javascript jquery css pseudo-element

【解决方案1】：

在伪元素上为opacity 设置transition，并向滚动的主元素添加一个类，您在选择器中使用该类来更改伪元素的不透明度。

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>

【讨论】：