Make sidebar sticky using JS

script.js

const sidebar = document.querySelector('.sidebar-is-sticky');
const content = document.getElementById('main');
const footer = document.querySelector('.site-footer');

if (sidebar && content && footer) {
    let sidebarTop = null;
    let ticking = false;

    // Only recalc sidebarTop on load/resize, not on every scroll (prevents flicker)
    function recalcSidebarTop() {
        const sidebarRect = sidebar.getBoundingClientRect();
        sidebarTop = sidebarRect.top + window.pageYOffset;
    }

    function handleSidebarSticky() {
        const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
        const sidebarHeight = sidebar.offsetHeight;
        const footerRect = footer.getBoundingClientRect();
        const footerTop = footerRect.top + window.pageYOffset;

        // Remove sticky state initially
        sidebar.classList.remove('position-sticky');
        sidebar.style.top = '';

        if (sidebarTop === null) {
            recalcSidebarTop();
        }

        // If sidebar is below original position, make sticky
        if (scrollTop > sidebarTop) {
            const stopPoint = footerTop - sidebarHeight - 20;

            if (scrollTop < stopPoint) {
                sidebar.classList.add('position-sticky');
                sidebar.style.top = '20px';
            } else {
                sidebar.classList.add('position-sticky');
                const offset = footerTop - scrollTop - sidebarHeight - 20;
                sidebar.style.top = `${Math.max(offset, 20)}px`;
            }
        }
    }

    // Use rAF to avoid scroll flicker
    function rafHandleSidebarSticky() {
        if (!ticking) {
            window.requestAnimationFrame(() => {
                handleSidebarSticky();
                ticking = false;
            });
            ticking = true;
        }
    }

    // On load: recalculate top, then stick if needed
    window.addEventListener('load', () => {
        recalcSidebarTop();
        handleSidebarSticky();
    });

    // Use rAF on scroll
    window.addEventListener('scroll', rafHandleSidebarSticky);

    // On resize: recalc sticky baseline and apply stick logic
    window.addEventListener('resize', () => {
        recalcSidebarTop();
        handleSidebarSticky();
    });
}