[CSS] position: sticky


[CSS] position: sticky

position: sticky - 스크롤 영역을 기준으로 배치 - top/left/right/bottom 중 특정한 값이 하나 이상 존재해야 하고 그렇게 부여된 값이 스크롤 영역에 맞닿았을 경우에만 동작함. - Internet Explorer 지원 불가. [사용 예시] position: sticky; 사용 예시 - position: sticky가 적용된 타이틀 부분이 스크롤을 내릴 때 화면 상단에 고정된 채 같이 내려오다 section이 끝나면 멈추고, 이후 section 영역이 달라지면 해당 section의 타이틀이 스크롤을 따라 내려옴. - 이전에는 javascript를 통해 상당히 어렵게 구현되던 기능이었으나 sticky 사용 시 이와 같이 구현 가능. - 스크롤되는 영역을 기준으로 배치하기 때문에 viewport 전체에 고정하는 개념처럼도 보일 수 있음. - 하지만 viewport도 하나의 스크롤 영역이라고 가정한다면 이와 같이 특정한 범위를 잡아 만들 수도 있음. - .c...


#css #position #sticky

원문링크 : [CSS] position: sticky