본문 바로가기

티스토리 북클럽 Book Club 스킨에서 사이드바 고정하는 간단한 방법

2019. 11. 20. 댓글 4

이 티스토리 블로그에는 현재 Book Club (북클럽)이라는 가장 최근에 공개된 스킨이 사용되고 있습니다. 현재 사이드바의 크기를 조금 조정했고, IE를 제외하고는 사이드바가 마우스를 스크롤할 때 함께 따라 내려가도록 설정되었습니다. 

저는 다음과 같은 CSS 코드를 추가했습니다.

/* 사이드바 너비 지정 및 고정 */

@media screen and (min-width:1081px) {
#aside {
    width: 26%;
    padding: 75px 0 32px;
    box-sizing: border-box;
  position: sticky;
  position: -webkit-sticky;
  top: 0; /* required */
}
#container .content-wrap:before {
        margin-left: 215px;
}

/* 본문 사이드바 마진 */
#content, #aside { padding-top: 45px;}
}

위의 코드에서 position: sticky;가 사이드바를 고정하는 기능을 하는데요. Can I Use에 의하면 sticky는 IE의 모든 버전과 Edge 브라우저 버전 15 이하에서는 지원되지 않습니다.

CSS sticky 요소

이 사이트처럼 중요하지 않는 개인 블로그의 경우 position: sticky;를 사용하면 간편하게 사이드바를 고정시킬 수 있습니다.ㅎ

참고:


※일부 글에 제휴 링크가 포함될 수 있습니다.

댓글4