전체태그 보기

#sticky (3개의 포스트)

decody
모바일 Safari에서 sticky 내비게이션을 구현할 때나 position: fixed를 선언하여 레이어를 만들 때, 해당 레이어가 부분적으로 렌더링이 되지 않아 뚫려보이는 오류가 발생한다. 오류를 해결하기 위해서는아래 css를 추가하고, 탭 이벤트시 이벤트 방지를 선언해 주어야 한다. css ~css stickyNav { -webkit-tr...
decody

sticky 내비게이션 만들기

2019년 8월 13일0개의 댓글
sticky 내비게이션은 스크롤시 페이지 상단에 고정되는 내비게이션이다. css의 postition:sticky 속성을 이용해 간단히 해당 내비게이션을 만들 수 있다. IE는 지원하지 않으며, Edge 16+, Firefox 32+, Chrome 56+ 지원한다. ~js const agent = navigator.userAgent.toLowerCase()...
sxhx
(물론 이런저런 CSS 프레임워크를 쓰면 그냥 해결될 문제이지만) 아래와 같은 효과를 구현해야 할 경우, c770d402-f4bb-4567-91c6-3e304d27df0a.gif 보통 clientHeight과 scrollHeight등으로 높이를 계산한다던가 좀 더 스마트하게 Intersection Observer를 사용한다던지 하는 자바스크립트로 해결을...