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

在伪元素上为transition设置opacity，并在滚动中向主元素添加一个类，用于更改伪元素的不透明度。

＆＃13;

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

在滚动时淡化伪元素 - JS或jQuery

1 个答案: