スクロールに擬似要素をフェードする - JSまたはjQuery

Question

スクロールで不透明にフェードしたい擬似要素があります。私はそれをする方法の頭や物語を作るように見えることはできません。私はここにコードを設定しました。 http://codepen.io/emilychews/pen/JWyaKr

通常、私はGreensockを使用しますが、私はこのプロジェクトではできません。私は絶対配置されたdivではなく、擬似要素を使用する必要があります。フェードは、上から10pxのスクロールした後に発生してから戻ってくる必要があるとき先頭へ戻るユーザーがスクロール（NAV要素のその一部）

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を設定し、あなたが擬似要素に不透明度を変更するために、セレクタで使用スクロール上の主要な要素にクラスを追加します。

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>