블로그스팟 사이드바 고정 시키는 방법(ft.스크롤 무관) - 블로소득(Blogger)

PC모드 기준으로 사이드바에 광고가 송출되는데 스크롤바를 내려서 없어지면? 아쉽겠죠~

원래 사이드바는 본문과 함께 같은 라인에 위치해서 스크롤바를 내리면 해당영역을 벗어나게 됩니다.

하지만 사이드바만 별도의 영역으로 설정해서 항상 똑같은 위치에 고정시킬 수 있습니다.

(최하단에 위치한 경우에만 사라집니다. 푸터(바닥)가 보여야해서요)

블로그스팟 사이드바 고정 시키는 방법

블로그스팟 Fikisioner 테마를 기준으로 사이드바 고정시키는 방법을 알려드리겠습니다.

작업 전 반드시 테마를 백업 후 수정하세요!

다른 테마도 이 코드를 이용해서 수정하시면 동일한 효과를 얻을 수 있습니다.

사이드바 고정을 위해서 필요한 코드는 총 3가지입니다.

1) Style CSS : Head 부분 넣을 코드

2) 자바스크립트 : Body 부분에 넣을 사이드바 고정 코드

3) 사이드바 별도영역 설정하는 코드

이렇게 3개의 코드를 쉽고 자세히 테마 코드에 추가해보도록 하겠습니다.

테마 > HTML 편집에서 아래 코드를 수정합니다.

1. Style CSS 코드

아래 코드를 복사해서 ]]></b:skin> 앞에 붙여넣습니다.

@media screen and (min-width: 1024px) {
  #sidebar-wrapper {
    position: sticky;
    top: 20px;
    height: calc(100vh - 40px);
    overflow-y: auto;
  }
}

2. 자바스크립트 코드

아래 코드를 복사해서 </body></html> 앞에 붙여넣습니다.

<script type='text/javascript'>
//<![CDATA[
(function() {
  if (window.innerWidth >= 1024) {  // PC 환경으로 간주할 최소 너비
    var sidebar = document.getElementById('sidebar-wrapper');
    var sidebarTop = sidebar.offsetTop;
    var maxY = document.getElementById('main-wrapper').offsetHeight - sidebar.offsetHeight;

    function stickySidebar() {
      var scrollY = window.scrollY || window.pageYOffset;
      
      if (scrollY > sidebarTop) {
        sidebar.style.position = 'fixed';
        sidebar.style.top = '80px';
        
        if (scrollY > maxY) {
          sidebar.style.top = (maxY - scrollY + 20) + 'px';
        }
      } else {
        sidebar.style.position = 'static';
      }
    }

    window.addEventListener('scroll', stickySidebar);
    window.addEventListener('resize', function() {
      if (window.innerWidth >= 1024) {
        maxY = document.getElementById('main-wrapper').offsetHeight - sidebar.offsetHeight;
        stickySidebar();
      } else {
        sidebar.style.position = 'static';
      }
    });
  }
})();
//]]>
</script>

3. 사이드바 별도영역 설정 코드

마지막 코드는 사진을 보면서 수정하시면 더 쉽게 수정할 수 있습니다.

테마 코드에서 <div class='mains'> 를 검색합니다.

그리고 아래 코드로 수정합니다.

<div class='mains' id='main-wrapper'>

<aside class='aside'>를 검색합니다. 그리고 그 코드를 아래 코드로 교체합니다.

* 구독자 hyoungdockkim8704님께서 의견 남겨주셨습니다 *

<aside class='aside'>
<div class='column sidebar-column' id='sidebar-wrapper'>

마지막으로 </aside>를 검색합니다. 그리고 아래 코드로 수정합니다.

</div></aside>

이렇게 수정하고 오른쪽 위의 저장 버튼을 누르면 모든 수정이 완료됩니다.

그러면 제 블로그와 동일하게 사이드바가 고정된 상태로 움직이는 것을 확인할 수 있을것입니다.