스크롤 할 때 의사 요소 사라짐 - JS 또는 jQuery

Question

스크롤 할 때 불투명도가 희미 해지기를 원하는 의사 요소가 있습니다. 나는 그것을하는 방법의 머리도 이야기를 할 수없는 것. 나는 여기에 코펜 핀을 설치했다. http://codepen.io/emilychews/pen/JWyaKr

일반적으로 Greensock을 사용 하겠지만이 프로젝트에서는 사용할 수 없습니다. 또한 절대 위치에있는 div가 아닌 의사 요소를 사용해야합니다. 페이드는 상단에서 10px 스크롤 한 후 발생하고 돌아올 필요가있을 때 위로 가기 사용자가 스크롤 (A 탐색 요소의 일부)

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>