1. 원글: 본문
2. 수정: Position Sticky를 구현하는 Fixed JS 코드 2차 수정
3. 수정: Position Sticky를 구현하는 Fixed JS 코드 3차 수정
4. 수정: Position Sticky를 구현하는 Fixed JS 코드 4차 수정
5. 활용: Position Sticky를 구현하는 Fixed JS 코드 활용
Position Sticky는 웹 페이지의 일부 Element가 사전 설정한 지점에서 움직임을 중지하고 고정되어 Position Fixed의 기능을 시작하는 매우 유용한 CSS 코드입니다.
"Position Relative + Position Fixed"를 하나로 통합한 것이라고 말할 수 있습니다. 대형 포털과 블로그 등 여러 사이트의 페이지 상단에 배치된 내비게이션 메뉴바에 많이 사용하고 있습니다.
오래전에 개발된 것이지만 최근에 이 코드를 지원하는 브라우저의 수가 많이 늘어서 호환성이 좋아졌기 때문입니다.
제 블로그(티스토리 NETWARE) 도 Sticky를 사용했었는데, 마이크로소프트 인터넷 익스플로러(IE)와 일부 브라우저들을 지원하지 않아서 사용을 중단하였습니다. 우리나라에 IE 사용자 계층이 아직도 많기 때문입니다. 현재 윈도우 10(버전 20H2)에 내장된 브라우저가 엣지(크롬 엔진)와 IE 2 종류가 있는데, IE가 최신 버전임에도 불구하고 Sticky를 지원하지 않습니다.
그래서 이 갭을 메우기 위하여 자바스크립트 혹은 jQuery로 프로그램을 작성하여 Sticky 효과를 내는 코드를 사용하고 있습니다. 개발자가 한국인인 것 같은데 외국의 영문 사이트에도 해당 코드를 등록하였습니다.
코드 소스 링크
1. 티스토리 "Moon의 개발 일기"
소스 페이지: Javascript(jQuery) - position sticky IE polyfill(폴리필) 방법
2. Level Up Coding by gitconnected.com
How to Make Position Sticky Work in IE: Build Your Own CSS Polyfill with JavaScript
2곳 모두 설명이 잘 되어 있습니다. 순수한 자바스크립트(Vanilla JS)와 jQuery 2 종류의 소스 코드를 무료로 사용할 수 있습니다.
| A polyfill is a piece of code (usually JavaScript on the Web) used to provide modern functionality on older browsers that do not natively support it. mdn web docs "Polyfill" |
코드의 오류 수정
15줄 정도의 코드 중 일부만 수록합니다. 모든 개발자에게는 고유의 저작권이 있으므로 이를 준수하는 것이 좋습니다. 오류가 발생하는 부분입니다.
코드 원본 (ERROR)
if (window.pageYOffset > rectTop) {
nav.parentNode.appendChild(tmp);
nav.style.position = 'fixed';
nav.style.top = 0;
} else {
nav.parentNode.removeChild(tmp);
nav.style.position = 'static';
nav.style.top = '';
}
if - else 조건식입니다.
페이지의 상단이 내비게이션 바를 넘어가는 구역에서는 "position: fixed"를, 그 외의 조건에서는 "position: static"를 지정하는 구문입니다.
"position: fixed"를 지정한 웹 페이지의 구역은 일종의 그래픽 레이어와 같은 현상이 발생하여 그 밑으로 다음 콘텐츠가 밀고 들어옵니다. 즉 "position: fixed" 지정한 영역만큼의 빈 공간이 생기는 것입니다. 이 빈 공간을 메워 주어야 하나의 평면에 균일하게 배치된 페이지를 볼 수 있습니다.
개발자는 'cloneNode()' 메소드(method)를 사용하여 "hidden" 속성을 부여한 'tmp' 임시 객체를 만들어 그 틈을 메웠습니다. 원래 자리로 스크롤 하여 복귀하면 이 객체를 (페이지에서) 지우는 것입니다. 메모리에는 남아 있습니다. 'appendChild()'와 'removeChild()' 메소드가 그 역할을 수행합니다.
코드가 훌륭하게 작동하여 짧지 않은 기간을 사용하였는데, 개발자 도구를 띄워서 '콘솔'을 살펴보니까 스크롤 하는 동안 DOM 오류가 계속해서 발생하여 쌓이고 있었습니다.
조건식 내에 처음 페이지를 띄울 때 만드는 'tmp' 임시 객체가 'window.addEventListener'의 반복되는 실행 환경과 맞지 않아서 DOM 오류가 발생하는 것입니다.
오류 수정 코드 (FIXED)
if (window.pageYOffset > rectTop) {
nav.parentNode.appendChild(tmp);
nav.style.position = 'fixed';
nav.style.top = 0;
}
else {
if ( tmp.parentNode ) {
tmp.parentNode.removeChild(tmp);
}
nav.style.position = 'static';
nav.style.top = '';
}
'else' 구문을 수정하면서 'tmp' 임시 객체가 존재할 경우에만 삭제하도록 if 구문으로 변경하여 해결하였습니다. DOM 오류는 더 이상 발생하지 않습니다. IE, 크롬, 엣지를 제외한 다른 브라우저에서는 테스트를 진행하지 않았습니다. 자세한 내용은 개발자 홈페이지의 전체 소스 코드를 참고하시기 바랍니다.
소스 코드를 다운로드하여 "오류 수정 코드" 부분만 교체하여 사용하면 됩니다. 수정할 부분 기록하여 파일 첨부합니다.
※ 모르고 이미지 파일을 첨부했었습니다. 텍스트 파일로 교체하였습니다. 하루에 일정 시간 운동 열심히 하고, 술과 담배 끊으세요. 인체가 움직임이 지나치게 적으면 혈관부터 시작하여 기능이 쇠퇴합니다. 무조건 기계가 대신하여 편한 것이 좋기만 한 것은 아닙니다.
댓글