Javascript_08-3: 스크롤(scroll) 이벤트의 활용

Javascript_08-3: 스크롤(scroll) 이벤트의 활용

window.scrollY를 활용하자

어느 일정 구간을 스크롤하면 '버튼'이 만들어지도록 한다

상수를 정하고 window.scrollY가 그 값을 넘으면 버튼이 생기는 방식이다

const STANDARD = 40; if (window.scrollY > STANDARD) { // 스크롤이 40px을 넘었을 때 toTop.classList.add('go_top'); //go_top이라는 버튼 생성

lastScrollY를 통해 스크롤의 방향을 추적한다

lastScrollY는 이전 내가 스크롤한 기록이다

그렇다면 현재 스크롤의 위치와 비교해서

이용자의 스크롤 방향을 알아낼 수 있다

스크롤을 내릴 때 위 메뉴바가 사라지고

스크롤을 올릴 때 위 메뉴바가 뜨도록 만든다

if (window.scrollY > lastScrollY) { // 스크롤 방향이 아래 nav.classList.add('lift-up'); }

from http://devyoseph.tistory.com/14 by ccl(A) rewrite - 2021-09-26 01:01:21