position sticky로 floating 버튼 만들기

자기 위치에 있으면서 따라다니기

floating 버튼을 만들때 유용한 sticky

 

일단 해당 원하는 위치에 배치한 후 

  position:sticky;
  bottom: 30px;

 

top 또는 bottom을 통해 붙을 위치를 정해준다 

 

bottom : 30px 을 주면 스크린 기준으로 밑에서 30px 떨어진 위치에서 따라다니다가 자기 위치가 되면 돌아간다 

 

 

 

  position:sticky;
  top: 30px;

top : 30px; 을 주면 본래 위치에 있다가 본래위치보다 스크롤이 내려가면 top:30px 에 위치해서 따라다닌다