JAVASCRIPT#40 - jQuery scroll() 스크롤 이벤트!

At night we're painting your trash gold while you sleep, crashing not like hips or cars! No more like. p.p.p.p parties!

JAVASCRIPT#40 - jQuery 브라우저 이벤트 SCROLL()

1. 브라우저 이벤트

- 브라우저 관련해서 사용자에 의한 이벤트 발생 창크기 조절 resize, 스크롤 scroll 이벤트 존재

- 주의 : scroll 이벤트는 브라우저를 힘들게하는 개적화요소로 작용할 수 있으므로 절대 하위에 함수 함부로 넣지말것.

2. scroll()

- 스크롤 발생시 발동하는 함수로 window를 셀렉터로 놓고 자주쓴다.

3. HTML에 사진넣기 태그

<img src="사진주소및이름" style="width:가로px;height:세로px;">

4. 스크롤 위치 및 브라우저 전체 세로길이 읽기

- 브라우저 전체 총 세로길이 = $(window).height()

- 현재 스크롤 위치 = $(window).scrollTop() + $(window).height()

5. AND 기호

: &&

6. $(window).scroll 이벤트가 너무 무거운데 어쩌지?

- 그러면 하위에 함수들 최대한 줄이고 함수 써야되는게 있으면 setTimeout 함수 타이머 써서 실행해서

딜레이줘서 최적화. scroll 자체가 많이 실행되는건 현재 시점에서 막을 수 없으니까 하위 함수 실행을 제한해서 가볍게하는 방법임.

7. fade in fade out 애니메이션 효과

- $(셀렉터).fadeIn("fast);

- $(셀렉터).fadeOut("slow);

- div요소 처음부터 안보이게 하는 방법 : css에 가서 display:none; 사용하기. 이렇게 감추고 fadein 해주면 나타나게 할수있음.

8. HTML 요소 화면 고정하는 방법

position:fixed;
right : 0px;
bottom:0px;

자바스크립트 jQuery 스크롤 scroll() 함수 + HTML 요소 스크린고정 CSS + HTML 사진넣기 종합꿀예제

By Dod Mason

스크롤이벤트및 화면고정 사진넣기 종합예제.zip