Jquery[제이쿼리] 이벤트[event]메서드 scroll 배우기

안녕하세요~ 주니주니 입니다.

오늘은 제이쿼리[jquery] 이벤트[event]메서드 scroll 배워보겠습니다.

위화면처럼 준비해주세요~

기본틀의 시작화면입니다.

===============================
$('.div1').scroll(function(){
   $('p').css( "display", "inline" ).fadeOut(2000);
  });
===============================
class이름이 div1가 scroll 마우스휠로 위아래로 움직일 경우
<p>태그의 css에 display를 inline으로 바꿔라 
그리고 fadeOut(2000) 천천히 사라지게해라 입니다.
display이는 위에보면 none로 안보이게 해둔상태입니다.
그상태에서 마우스휠로 움직이게되면 inline으로 보이게되고
다시 어제배운 fadeOut()로 천천히 사라지게된답니다.

div1 안에서 아직 마우스휠로 이벤트를 주기전입니다.

div1안에서 마우스로 휠을주는순간! 숨어있던 글들이 보이면서 천천히 사라지는 모습입니다.

===============================
$(window).scroll(function(){
   $('p').css( "display", "inline" ).fadeOut(2000);
  });
===============================
이번대상은 window <== 브라우저창에서 마우스휠로 위아래로 움직일 경우입니다.
아래 내용은 똑같습니다.
※이번에는 div1가 아닌 브라우저창이므로 어떤게 다른지 잘 확인해보셔야합니다.

마우스휠로 이벤트를 주기전입니다.
두근두근!

div1에서 마우스휠로 위아래로 움직여봐도 효과가없네요 ㅠㅠ

브라우저창에서 마우스휠로 위아래로 움직이니 적용되네요!! 오호~

그럼 이번에는 책갈피 효과를 넣어둔 버튼을 클릭해보겠습니다.!
책갈피는 브라우저창 맨아래에 "여기로 도착" <== 이부분에 책갈피를 만들어 두었습니다.

책갈피 효과로 브라우저창의 막대기가 움직이게되므로 똑같이 스크롤효과를 낼수있답니다.!
오늘은 제이쿼리[jquery] 이벤트[event]메서드 scroll 배워보았습니다.
그럼다음에 만나요~