FEDev Story

const toFitScroll = (cb) => { let tick = false return function trigger () { if (tick) { return } tick = true return requestAnimationFrame(function task() { tick = false return cb() }) } } const onScroll = () => { } window.addEventListener('scroll', toFitScroll(onScroll), { passive : true }) https://jbee.io/web/optimize-scroll-event/ 스크롤 이벤트 최적화 ⚠ 이 포스팅은 자바스크립트의 비동기 처리에 대한 이해를 기반으로 작성되었습니다. 이 포스팅..

앞서 유사한 기능의 플러그인인 Headroom.js 에 대하여 살펴보았는데, 구형 IE에 대한 크로스브라우징에 어려움을 겪을 수 있습니다. 이에 원리는 유사하나 대상 요소가 명확하게 한정된 요소일때 간단히 구현할 수 있는 스니펫을 소개합니다.DOC Hide header on scroll down, show on scroll upDEMO Hide Header on on scroll down고정된 헤더(네비게이션) 사용 불편함 인지많은 웹사이트에서 네비게이션 탐색에 도움을 주기위해 상단의 헤더(네비게이션을 포함한)를 CSS의 포지셔닝을 사용해 position: fixed 와 같이 고정해 두곤 한다. 헤더 부분은 대부분 상호(브랜드)를 포함하고 네비게이션을 포함하기에 고정된 헤더에 높이가 긴 콘텐츠를 포함하고..