가변적인 높이의 엘리먼트 가 사이드에 세로로 3개가 있을때
맨 아래 3번째가 스크롤을 해서 2개의 엘리먼트가 화면에서 사라지는 시점 3번째 엘리먼트가 최상단에 위치했을때 3번째는 위치를 고정하고 다시 스크롤하여 화면의 위쪽을 보여 이동하면 위치고정이 풀려 위쪽 앨리먼트 2,1이 보이도록 하려고 하는데 참조할 만한 소스가 있을까요??
| PHP | PHP 7.2 |
|---|---|
| CMS | XpressEngine |
-
-
방금 링크 페이지 방문해서 시연을 보니 제가 원하는게 맞는 것 같습니다. 살펴보겠습니다. 감사합니다. -
css Sticky 속성으로는 구현이 잘 안되서
기존에 레이아웃에서 제공하는 사이드바 영역 고정 기능을 수정해서 사이드바 중에서 광고쪽만 고정되게 고쳐서 수정했네요. -
sticky가 그렇게 쓰이는 거였군요. 저도 처음 알게 됐어요ㅎㅎ
궁금해서 찾아봤는데 스크롤되는 영역과 sticky되는 요소 사이에 overflow 속성이 끼어 있는 게 있으면 그냥 relative로 인식한다더군요. -
결국 잘안되서 레이아웃에 잘만들어진 사이드 고정기능에서 fixed 할 영역 과 위 가변 엘리먼트 2개 지나 고정시킬 엘리먼트 바로 위에 위치값 확인할 더미 엘리먼트 추가해서 완성했네요.
결과적으로는 더 잘되었습니다. 브라우저에 따라 sticky는 안될 수 있거든요. -
?
웹지기님도 PHP 7.2이었군요.^^
https://www.w3schools.com/howto/howto_css_sticky_element.asp