티스토리 오디세이 스킨: 사이드바 고정하기

저는 대부분의 워드프레스 사이트에서는 CSS를 사용하여 사이드바를 고정하고 있습니다. 뉴스페이퍼 등 일부 유료 테마에서는 테마 옵션을 통해 사이드바 붙박이(Sticky) 기능을 제공하지만, 그런 기능이 제공되지 않을 경우 보통 CSS로 고정하는 것이 가능합니다.

GeneratePress 테마 사이드바 고정하기 (How to make the sidebar sticky in GeneratePress) - 워드프레스 정보꾸러

이 블로그에는 현재 오디세이(Odyssey)라는 티스토리 공식 스킨 중 하나가 사용되고 있습니다. 오디세이에서는 CSS를 사용하여 사이드바를 고정하려고 시도해 보았지만 생각처럼 고정이 되지 않네요. 저는 자바스크립트를 사용하여 사이드바를 고정하도록 코드를 추가했습니다.

티스토리 오디세이 스킨: 사이드바 고정하기

이 블로그에서는 CSS로 사이드바를 고정하려고 시도하다 포기하고 자바스크립트를 사용해 보았습니다.

아래로 스크롤할 때 고정하도록 코드를 만들었는데요. 이론상 사이드바 고정 위치가 맞지만, 실제와는 약간 차이가 있어서 최대한 조정을 해보았습니다.😁😁

<script>
var debounceTimer;
var originalMainWidth; // Variable to store the original width of the area-main

window.addEventListener('load', function() {
    var contentArea = document.querySelector('.area-main');
    originalMainWidth = contentArea.offsetWidth; // Store the original width on page load
});

window.addEventListener('scroll', function() {
    clearTimeout(debounceTimer);
    debounceTimer = setTimeout(function() {
        if (window.innerWidth > 1300) {
            var sidebar = document.querySelector('.area-aside');
            var mainElement = document.querySelector('.main');
            var contentArea = document.querySelector('.area-main');

            var screenWidth = window.innerWidth;
            var mainWidth = mainElement.offsetWidth;
            var rightPosition = (screenWidth / 2) - (mainWidth / 2) - 8; // Adjusted for margin

            if (window.pageYOffset >= 550) {
                sidebar.style.position = 'fixed';
                sidebar.style.right = rightPosition + 'px';
                sidebar.style.top = '52px'; // Adjusted for margin

                // Set the width of the area-main to its original width
                contentArea.style.width = originalMainWidth + 'px';
            } else {
                sidebar.style.position = 'static';
                contentArea.style.width = 'auto'; // Reset the width of area-main
            }
        }
    }, 10);
});

</script>

상기 코드로 테스트해 보고, 위치가 어긋나는 경우 코드를 적절히 수정하여 보정할 수 있을 것입니다.

꾸미기 » 스킨 편집 » html 편집 » HTML 탭으로 이동하여 [**</body>**] 태그 바로 위에 상기 코드를 추가할 수 있습니다.

며칠 전에 오디세이 스킨으로 변경한 후에 몇 가지 기능을 추가했습니다. 

티스토리에 소셜 공유 버튼과 URL 복사 버튼 추가하기

브레드크럼을 추가하고 데스크톱에서 위로 이동(Scroll to Top) 버튼이 표시하도록 추가했습니다.

마치며

이상으로 티스토리의 오디세이 스킨에서 사이드바를 고정하는 방법에 대하여 살펴보았습니다. 최근 티스토리 시스템이 업데이트되면서 기존에 사용하던 스피드스타라는 유료 스킨이 문제를 일으켜서 급히 오디세이 스킨으로 변경했습니다. 스피드스타 개발자분이 패치를 내놓았지만 계속 오디세이 스킨을 사용하게 될 것 같습니다.

티스토리 스킨을 오디세이(Odyssey)로 변경했습니다

참고

https://avada.tistory.com/2897

엘리멘터 무료 버전 vs. 프로 버전 비교

https://avada.tistory.com/3046

해외웹호스팅: 클라우드웨이즈 vs. 블루호스트 vs. 카페24 비교 (Cloudways vs. Bluehost vs. Cafe24)