[220602 / Day 22] 상단에 메뉴바 붙여주기 2

width.html 548p

offsetWidth  , getBoundingClientRect 많이 씀

getBoundingClientRect : 하나만 뽑아보고 싶으면 (). 뒤에 width, height 등 적으면 따로 추출가능

 

posion.html

getBoundingClientRect().top : 브라우저 안쪽 페이지 기준으로 바깥 여백 위쪽

getBoundingClientRect().right : 브라우저 왼쪽부터 요소 오른쪽까지의 값

getBoundingClientRect().bottom : 브라우저 위쪽부터 요소 아래쪽까지의 값

offset : 상위 요소 기준, 어떤 포지션을 줬느냐 에 따라 값이 달라짐, css 포지션 정책대로 top, left 위치 값 받아옴

 

pageYoffset , scrollY 같음 : 스크롤되고 문서가 올라간 높이

pageYoffset :

scrollY :

 

scrollbasic1.html

콜백함수

 

scrollbasic2.html

스크롤 스무스랑 없는 거 비교

스크롤바이 투 둘다 behavior: 'smooth' 쓸 수 있음

 

naviupdate-scroll.html

페이지가 section box 1,2,3,4,5 가 포함되어 길게 되어 있음 그래서 li 하나 누를 때마다 각 box 의 좌표가 맞춰져야 함

그래서 getBoundingClientRect left top 으로 받아오면 됨

포인트 이벤트?

 

halloween-scroll.html

gnb 내려가면 상단에 fix 해주고 각 section 으로 이동하도록

function 했으면 상관이 없는데 const 로 했기 때문에 호이스팅이 되지 않아서 먼저 변수하고 호출

 css : .fix bottom:auto  position:fixed 해줬기 때문에 bottom 0해버리면 페이지 맨 밑까지 gnb 영역으로 됨 그래서 auto 해줘서 컨텐츠만큼 잡도록

 

naviscroll.html

 

window.html : 차이

window : 전역객체 , 자바스크립트 가장 최상위 객체 , 브라우저 실행됐을 때 가장 먼저 로딩되는 객체 , 창으로도 간단하게 생각 가능

document: 윈도우 객체 아래에 위치 ,

onload : 페이지가 열렸을 때 이벤트, 버블링 때문에 다 먹기 때문에 윈도우나 도큐먼트나 다 적용됨

DOMContentLoaded : html 돔트리와 스크립트 뒤에 읽어오는 것, 윈도우에도 적용 가능(이벤트 버블링 때문에)

 

스크립트를 헤드 사이에 달면 에러가 남 window.load

IntersectionObserver: 해당 공간 안에 들어간가면 특정 이벤트를 실행

 

navi-img-scrollupdate.js

<script src="js/navi-img-scrollupdate.js" defer></script> : script 에 src 썼을 때만 defer 사용 가능

이미지 넌 시켜놔서 클래스 넣어서 스크롤되면 이미지 나오도록

이미지 업이라는 클래스 붙으면 left 0 오퍼시티 1 트랜지션 left 오퍼시티 둘다 부여

각 section 스타트 지점과 앤드 지점 좌표 알아내야 함 시작점 플러스 높이 하면 끝점 뭐가 이 안에 있는지 따져야 함