스크롤을 내리면 클래스를 추가시킵니다.
스크롤이 발생하면 기존의 클래스에 옵션을 추가해둔 클래스를 추가하여 스크롤 후 이미지나 텍스트가 움직이거나 페이드 되거나 할 수 있는 코드입니다!
<script>
// 스크롤이 발생합니다.
$(window).scroll(function(){
var scroll = $(document).scrollTop();
//스크롤이 200px 이상이면 #original클래스에 .addsign 클래스 추가합니다.
if(scroll >= 200 ){
$("#original").addClass("addsign");
}
//스크롤이 200px 미만이면 #original클래스에 .addsign 클래스를 삭제합니다.
else if(scroll <= 200 ){
$("#original").removeClass("addsign");
}
});
</script>
마우스가 다시 올라가면 클래스를 삭제하여 다시 스크롤시 또 적용되게 됩니다! 그게 싫다면 removeClass 부분을 삭제 하면 한번 스크롤 후 액션이 실행후 고정되겠죠? .addClass와 .removeClass 클래스 추가와 클래스 삭제가 포인트! 그리고 클래스가 아닌 스타일 추가를 원한다면
<script>
$("#original").css("color","red");
</script>
위와 같은 식으로 color 그리고 속성을 적어주시면 됩니다!