목록sticky (1)

Jaeilit

Position Sticky 시 엘리먼트가 더 클 경우 활용

position sticky 를 사용하면 top 또는 left bottom 등 설정해놓은 포지션 값에 도달했을 때 fixed랑은 다른 느낌으로 엘리먼트가 그 위치에 걸려 있는 느낌이 들게 한다. 보통 엘리먼트가 view height 보다 작은 경우는 아무 에러가 없지만 view height 보다 커서 스크롤이 생긴 엘리먼트의 경우 top 0 을 기준으로 sticky를 사용 할 경우 스크롤이 있는 부분은 잘려서 안보이게 된다. 이 경우 top 0, 어디시점을 기준으로 걸어놓을 건지를 계산해줘야한다. window.addEventListener("scroll", function () { let windowHeight = window.innerHeight; let sticky = stickyRef?.curren..
TIL 2022. 5. 24. 14:17
이전 Prev 1 Next 다음