position: fixed와 sticky

fixed

box를 스크롤 화면에서 지정된 위치(top, bottom, left, right)에 고정시킨다. (스크롤 시에 같이 이동한다.)

sticky

box를 부모 컨테이너 안에서 fixed와 같이 스크롤 화면에 고정시킨다. 스크롤이 컨테이너를 벗어나면 box는 이동을 멈춘다.

See the Pen Untitled by Donghwan Oh (@iamodh) on CodePen.

 

 

sticky box를 스크롤 화면 바닥에 고정시키고 싶다면 box를 container 바닥에 위치시킨 후 bottom: 0;을 하면 된다.