1. 원글: Position Sticky를 구현하는 Fixed JS 코드 오류 수정
2. 수정: 본문
3. 수정: Position Sticky를 구현하는 Fixed JS 코드 3차 수정
4. 수정: Position Sticky를 구현하는 Fixed JS 코드 4차 수정
5. 활용: Position Sticky를 구현하는 Fixed JS 코드 활용
윗글에 이어서 다시 수정한 부분을 반영하여 설명 진행합니다.
수정 내역
1. 블로그의 댓글 리스트에서 한 항목 링크를 누르면 페이지가 열리면서 하단 댓글 리스트로 이동합니다.
이때 "position: fixed"입니다.
페이지의 최상단으로 이동하면 "position: static"으로 변경되어야 하는 데, 오류 때문에 바뀌지 않습니다.
위치 코드를 출력하는 검사 코드를 넣어 오류를 확인하니까,
위치 값 0으로 제시되어야 할 높이에서 6400 같은 엉뚱한 위치 값을 출력합니다. 아래와 같이 코드를 변경하고 문제는 해결하였는데 원인은 확인하지 못했습니다. 'getBoundingClientRec()'가 가장 브라우저 호환성이 좋은 코드라서 블로그에 사용한 다른 코드와 충돌을 의심하고 있는 데, 일단 다른 방법으로 문제가 해결되어서 분석은 잠시 미루고 있습니다.
(전) const rectTop = nav.getBoundingClientRect().top;
(후) const rectTop = nav.offsetTop;
2. 조건문 변경
이벤트 핸들러가 좀비 프로세스를 실행하는 문제가 있어서 조건문에서 필요 없는 조건을 삭제하였습니다.
(전) if (window.pageYOffset > rectTop) {
(후)
① if ( window.pageYOffset > rectTop && !tmp.parentNode ) {
② } else if ( window.pageYOffset < rectTop && tmp.parentNode ) {
오류 수정 및 조건문 변경
const nav = document.getElementById('main-header'),
tmp = nav.cloneNode(true),
rectTop = nav.offsetTop;
tmp.style.visibility = 'hidden';
window.addEventListener('scroll', function() {
if ( window.pageYOffset > rectTop && !tmp.parentNode ) {
nav.parentNode.appendChild(tmp);
nav.style.position = 'fixed';
nav.style.top = 0;
} else if ( window.pageYOffset < rectTop && tmp.parentNode ) {
tmp.parentNode.removeChild(tmp);
nav.style.position = 'static';
nav.style.top = '';
}
});위 코드에서는 스타일 값을 HTML로 직접 출력했는데, 미리 설정한 클래스를 호출하는 형태로 변경하였습니다. 사용자 환경에 맞추기 위한 목적입니다. 속도는 미세하게 느릴 것으로 예상되지만 'style.css' 편집만으로 페이지의 전체 디자인을 손쉽게 변경할 수 있습니다. class ".fixed"와 ".static"을 'style.css' 파일에 추가해야 합니다.
블로그 환경에 맞게 출력 코드 수정
const nav = document.getElementById('main-header'),
tmp = nav.cloneNode(true),
rectTop = nav.offsetTop;
tmp.style.visibility = 'hidden';
window.addEventListener('scroll', function() {
if ( window.pageYOffset > rectTop && !tmp.parentNode ) {
nav.parentNode.appendChild(tmp);
nav.className = "fixed";
} else if ( window.pageYOffset < rectTop && tmp.parentNode ) {
tmp.parentNode.removeChild(tmp);
nav.className = "static";
}
});코드 원본 개발자 링크
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
'cloneNode()' method에 대한 설명은 링크 참고
"Node.cloneNode() - Web APIs | MDN (mozilla.org)"
"HTML DOM cloneNode Method (w3schools.com)"
자바스크립트 자료 수집 중
getBoundingClientRect().top
element 상단으로부터 뷰포트 상단까지의 거리
window.pageYOffset
스크롤로 인하여 발생한, 뷰포트 상단으로부터 (보이지 않는) 문서 상단까지의 거리
getBoundingClientRect().top + window.pageYOffset
문서의 숨겨진 영역을 포함하여 element 상단으로부터 문서 상단까지의 거리
댓글