[js 코드] 스크롤 시 특정 위치에서 div 배경색 바꾸기

See the Pen Untitled by youngwan2 (@youngwan2) on CodePen.

 

 

ㅁ pageYOffset 와 pageXOffset

window.pageYOffset 으로 접근하면 현재 웹 화면의 스크롤 세로축의 현재 위치에 대한 px 정보를 확인할 수 있다.
가로축 스크롤 위치는 window.pageXOffset 으로 접근이 가능하다.

참고로 scrollY 와 scrollX 는 앞서 언급한 pageYOffset 과 pageXOffset과 동일한 기능이다. 하지만, 웹 브라우저의 호환성을 생각한다면 쓰지 않는 것이 좋다 하더라.

ㅁ 기존 태그에 새로운 클래스 추가와 삭제

기존의 태그에 새로운 클래스를 추가(add)하려면 다음과 같이 접근한다.

태그요소. classList.add('추가할 클래스명')

반면 기존 태그요소에서 클래스를 삭제하고자 한다면 add 대신 remove 로 접근한다.

태그요소.classList.remove('삭제할 클래스명')