사이트 수정에서position:sticky의polyfill을 사용할 기회가 있습니다.
이번에polyfill의 내부 설치와 이용에 주의해야 할 점을 소개하고 싶습니다.

Sticky 소개

우선position:sticky의 간단한 소개부터 시작하겠습니다.
position:sticky는 css의 기술로 화면에서 굴러갈 때 화면의 상하좌우, 지정된 위치에서 고정된 요소를 굴러갈 수 있다.
아래의 상황.Sample의 요소가 화면에 나타나면 top는 0의 위치에서 따라간다.

.sample {
  position: sticky;
  top: 0px;
}

이 css를 사용하면 사이드바를 특정한 위치로 스크롤할 수 있거나 스크롤이 발생하는 테이블 조합을 스크롤할 때th만 따라갈 수 있어 편리합니다.

position:sticky 지원 현황

위에서 소개한 바와 같이position:sticky는 지금까지 js를 사용하지 않으면 재현할 수 없는 편리한 css를 간단하게 실현할 수 있지만 이용할 수 있는 브라우저가 제한되어 있어 유감스러운 부분이다.
http://caniuse.com에서 지원 현황을 조사한 결과 IE는 11까지 지원할 수 없고 PC 사이트 설치에 간단하게 사용할 수 없는 것으로 나타났다.

Stick의 polyfill을 사용해 봤습니다.

브라우저 사이의 브라우저를 웹 사이트에 직접 올리기는 매우 어렵다.
하지만 이럴 때polyfill이 편해요.
polyfill은 기존 기술을 이용하여 현대 브라우저가 실현할 수 없는 전통적인 브라우저의 기능을 보완하고 같은 기능을 제공하는 방법이다.
sticky의polyifill은 다양한 출처를 공개했다. 이번에는 두 가지의polyifill을 시도했다.

http://wd.dizaina.net/en/scripts/stickyfill/

http://philipwalton.github.io/polyfill/demos/position-sticky/

sticky의polyifill 내부 설치

결론은position:sticky의polyifill에는 두 가지 큰 실현 방법이 있다.

모드 ①: 특정 스크롤 범위 내에서만position:fixed로 변경

첫 번째 모드는position:sticky가 지정한 심볼의 임의의 위치로 굴러갈 때 따라가는 방법입니다.
- http://wd.dizaina.net/en/scripts/stickyfill/

특징.

position:sticky를 간단하게 재현합니다.

다음의bottom이나left 등 고정요소를 통과할 수 없습니다.

.div {
  position: sticky;
  bottom: 150px;
}

.div {
  position: sticky;
  left: 150px;
}

모드 ②:position: sticky가 지정된 요소를 복사하여 표시

두 번째 모델은position:sticky가 지정한 요소가 임의의 위치로 굴러갈 때 요소를 복제하여 따라가는 것처럼 보이는 방법이다.
원본 요소를 숨기고 복사 요소에position:fixed를 붙여서 추적합니다.
- http://philipwalton.github.io/polyfill/demos/position-sticky/

특징.

추종할 때 복제 요소가 표시되기 때문에 #position:sticky를 지정한 요소를 이벤트 등록하는 경우 등에 주의해야 한다.

모드 ① 역시 bottom이나 left 등 고정 요소를 통과할 수 없다.

총결산

스티커의polyfill 내부 설치를 소개했다.
간단한 사용법이라면 내부 설치에 특별히 신경 쓸 필요가 없다.
그러나position:sticky의 요소가 js에 동작을 더하면 내부 설치를 미리 알 필요가 있다고 생각합니다. 참고할 수 있다면 좋겠습니다.