【SWELLカスタマイズ】スクロール連動で現在地がわかる「追従サイドバー目次」の作り方

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const targetElement = document.querySelector('.c-widget > .p-toc');
        if (targetElement && targetElement.previousElementSibling) {
            const previousElement = targetElement.previousElementSibling;
            if (previousElement && previousElement.tagName === 'DIV') {
                const newSpan = document.createElement('span');
                newSpan.innerHTML = previousElement.innerHTML;
                Array.from(previousElement.attributes).forEach(attr => {
                    newSpan.setAttribute(attr.name, attr.value);
                });
                previousElement.replaceWith(newSpan);
            }
            targetElement.parentElement.classList.add('p-toc');
            targetElement.parentElement.classList.add('-capbox');
            targetElement.previousElementSibling.classList.remove('c-widget__title');
            targetElement.previousElementSibling.classList.add('p-toc__ttl');
        }
        
        var varHtagElements = null;
        var varSideBarItem = null;

        window.addEventListener('load', function () {
            setTimeout(function(){fnAfterContents();}, 10);
        });

        function fnAfterContents() {
            varHtagElements = document.querySelectorAll('h2, h3');
            var varHtagArray = Array.from(varHtagElements);
            var varHtagPosition = varHtagArray.map(item => item.getBoundingClientRect().top);
            var varHtagPositionWithScroll = varHtagPosition.map(top => Math.floor(top + window.scrollY));

            varSideBarItem = document.querySelectorAll('#sidebar .p-toc__link');

            if (varSideBarItem == null || varSideBarItem.length == 0) {
                return;
            }

            const countHtag = varHtagElements.length;
            const countSideBarItem = varSideBarItem.length;
            const iMaxLoop = countHtag > countSideBarItem ? countSideBarItem : countHtag;

            window.addEventListener('scroll', () => {
                const currentPosition = window.scrollY + 200;

                for (let iCount = 0; iCount < iMaxLoop; iCount++) {
                    varSideBarItem[iCount].classList.remove('currentTocPosition');
                    if (iCount >= iMaxLoop - 1 ) {
                        if (currentPosition >= varHtagPositionWithScroll[iCount]) {
                            varSideBarItem[iCount].classList.add('currentTocPosition');
                        }
                    } else {
                        if (currentPosition >= varHtagPositionWithScroll[iCount] && currentPosition < varHtagPositionWithScroll[iCount + 1]) {
                            varSideBarItem[iCount].classList.add('currentTocPosition');
                        } 
                    }
                }
            });
        }
    });
</script>

/* 追従サイドバー目次 */ 
#fix_sidebar .widget_swell_index {
	opacity: 0;
}
#sidebar .p-toc.-capbox {
	animation: fadeIn 1s ease 0.3s forwards;
	border: 2px solid var(--color_main);
    margin: 1.5em 0 0;
}
@keyframes fadeIn {
  to {
    opacity: 1;
    transform: none;
  }
}
/* 現在読んでいる目次のハイライト設定 */
.p-toc__link.currentTocPosition {
	color: white;
	background-color: #0061b7 !important; /* お好みの背景色に変えてね */
    font-size: 1.1em;
    padding: 0 5px;
}