offsetTop, offsetHeight
785
18 asked
안녕하세요 강사님..
강사님 수업 열심히 듣고 있는데요~~ 질문이 있습니다!
if(scroll > section[i].offsetTop - window.innerHeight/3 )
Y축 스크롤값이 섹션 i번째의 세로 높이 - 윈도우 창의 높이/3
보다 크고,
&&
( scroll < section[i].offsetTop - window.innerHeight/3 + section[i].offsetHeight
Y축 스크롤값이 섹션 i번째의 세로 높이 - 윈도우 창의 높이/3 + 섹션 i번째의 길이보다 작을 때 실행인데
섹션 세로 높이랑 길이랑 어떻게 다른건지 잘 이해가 안됩니다...!
이부분 참 어렵네용,,, 🧐
Answer 2
1
일단 window.innerHeight 는 화면 (브라우저) 크기입니다.
섹션[5].offsetTop : 0에서 시작해서 섹션이 시작하는 높이. (예 : 500px)
섹션[5].offsetHeight : 해당 섹션의 길이. (예 : 700px)
이렇게 보시면 섹션5의 시작점은 500px 이고 끝나는 지점은 1200px 입니다.
if(scroll > section[i].offsetTop - window.innerHeight/3 )
scroll > 500px - window.innerHeight/3
위는 간단하죠? 헷갈리시면 /3을 빼보세요.
&&
( scroll < section[i].offsetTop + section[i].offsetHeight - window.innerHeight/3 )
scroll < 500px + 700px - window.innerHeight/3
(window.innerHeight/3 을 뒤로 뺐습니다. )
현재 scroll 값이 저 조건 안에 있으면 실행인 겁니다.
헷갈리는 게 정상입니다 ^^ 플러그인을 쓰면 간단해지지만,
원리를 알고 쓰는 게 좋을 것 같아서 강의에 포함시킨 부분입니다.
모바일 스와이프 구현 마지막 숙제
0
402
2
레퍼런스 사이트
0
339
1
스크롤위치에 따른 페이지 변화에서
0
267
1
배열을 이용한 bg컬러 변경 강의에서 tagname body에 [0]이 왜 붙나요?
0
380
1
스크롤 위치에 따른 페이지 변화 - scroll 이벤트 에 대한 질문
0
675
1
페이징.페이지고정2 질문드립니다.
0
459
1
scrollTo 완성본
0
603
2
모바일 3D 입체 카드 제작 아이폰에서 에러
0
386
1
css 질문 드립니다
0
624
1
css 질문
0
284
1
pointBtn.addEventListner("click")
0
305
2
if문의 첫번째 조건 질문 있습니다~
0
285
1
기존의 축 회전값에 더해서 rotate
0
320
1
모바일 드래그 강의 질문드립니다!
0
256
1
질문입니다.
0
215
1
GSAP(트윈맥스) 라이센스 관련 질문 드립니다.
0
1657
1
wrap 안에 click 이벤트
0
225
1
greensock을 사용하려면
0
701
1
TweenMax 효과 리셋
0
527
1
max 이상으로 입력했을 때 질문입니다.
0
193
1
dom에서 직접i nput의 value 값을 갖고 나오는 것에 대해
0
371
1
화살표 회전 질문
0
263
1
질문이용~
0
218
1
파일명 한글시 live Server 작동안함
1
213
1