Как сделать меню с вкладками ME602А фиксированным при скролле + добавить скролл к якорю при нажатии в Tilda

<script>
document.addEventListener("DOMContentLoaded", function() {
    (function () {

    const tabBlock = document.querySelector('.uc-fixed-tab');
    if (!tabBlock) return;
    
    let originalTabBlockTop = 0;
    let tabBlockHeight = 0;
    let isFixed = false;
    let isHidden = false;
    let lastTargetElement = null;
    let placeholder = null;
    let ignoreHide = false; 
    let scrollToPosition = 0;
    let hasInitialized = false;
    

    function init() {
        if (hasInitialized) return;
        hasInitialized = true;
        
        const wasFixed = tabBlock.style.position === 'fixed';
        if (wasFixed) {
            tabBlock.style.position = 'static';
        }
        
        updateOriginalPosition();
        
        if (wasFixed) {
            tabBlock.style.position = 'fixed';
        }
        
        const targetIds = getTargetIds();
        if (targetIds.length === 0) return;
        
        findLastElement(targetIds);
        addClickHandlers();
        checkState();
    }
    

    function updateOriginalPosition() {
        const originalPosition = tabBlock.style.position;
        const originalTop = tabBlock.style.top;
        const originalLeft = tabBlock.style.left;
        const originalRight = tabBlock.style.right;
        const originalZIndex = tabBlock.style.zIndex;
        
        tabBlock.style.position = 'static';
        tabBlock.style.top = '';
        tabBlock.style.left = '';
        tabBlock.style.right = '';
        tabBlock.style.zIndex = '';
        
        let offsetTop = 0;
        let currentElement = tabBlock;
        
        while (currentElement) {
            offsetTop += currentElement.offsetTop;
            currentElement = currentElement.offsetParent;
        }
        
        originalTabBlockTop = offsetTop;
        
        const rect = tabBlock.getBoundingClientRect();
        tabBlockHeight = rect.height;
        
        scrollToPosition = Math.max(0, originalTabBlockTop - 20);
        
        tabBlock.style.position = originalPosition;
        tabBlock.style.top = originalTop;
        tabBlock.style.left = originalLeft;
        tabBlock.style.right = originalRight;
        tabBlock.style.zIndex = originalZIndex;
    }
    

    function getAbsoluteOffsetTop(element) {
        let offsetTop = 0;
        let currentElement = element;
        
        while (currentElement) {
            offsetTop += currentElement.offsetTop;
            currentElement = currentElement.offsetParent;
        }
        
        return offsetTop;
    }
    

    function getTargetIds() {
        const lis = tabBlock.querySelectorAll('li[data-tab-rec-ids]');
        const allIds = [];
        
        lis.forEach(li => {
            const idsString = li.getAttribute('data-tab-rec-ids');
            if (idsString) {
                const ids = idsString.split(',').map(id => `rec${id.trim()}`);
                allIds.push(...ids);
            }
        });
        
        return [...new Set(allIds)];
    }
    

    function findLastElement(targetIds) {
        let lastElement = null;
        let lastElementBottom = -Infinity;
        
        targetIds.forEach(id => {
            const element = document.getElementById(id);
            if (element && element.offsetParent !== null) {
                const elementTop = getAbsoluteOffsetTop(element);
                const elementHeight = element.offsetHeight;
                const elementBottom = elementTop + elementHeight;
                
                if (elementBottom > lastElementBottom) {
                    lastElementBottom = elementBottom;
                    lastElement = element;
                }
            }
        });
        
        lastTargetElement = lastElement;
    }
    

    function recalculatePositions() {
        setTimeout(() => {
            const rect = tabBlock.getBoundingClientRect();
            tabBlockHeight = rect.height;
            
            if (placeholder) {
                placeholder.style.height = tabBlockHeight + 'px';
            }
            
            const targetIds = getTargetIds();
            if (targetIds.length > 0) {
                findLastElement(targetIds);
                ignoreHide = false;
                setTimeout(checkState, 100);
            }
        }, 350);
    }
    

    function scrollToTabBlock() {
        window.scrollTo({
            top: scrollToPosition,
            behavior: 'smooth'
        });
    }
    

    function addClickHandlers() {
        const buttons = tabBlock.querySelectorAll('li button');
        
        buttons.forEach(button => {
            button.addEventListener('click', function(e) {
                ignoreHide = true;
                showTabBlock();
                
                if (isFixed) {
                    removeFixed();
                    
                    setTimeout(() => {
                        scrollToTabBlock();
                        
                        setTimeout(() => {
                            ignoreHide = false;
                            recalculatePositions();
                        }, 500);
                    }, 100);
                } else {
                    scrollToTabBlock();
                    
                    setTimeout(() => {
                        ignoreHide = false;
                        recalculatePositions();
                    }, 500);
                }
            });
        });
        
        const select = tabBlock.querySelector('select.t1281__select');
        if (select) {
            select.addEventListener('change', function() {
                ignoreHide = true;
                showTabBlock();
                
                if (isFixed) {
                    removeFixed();
                    
                    setTimeout(() => {
                        scrollToTabBlock();
                        
                        setTimeout(() => {
                            ignoreHide = false;
                            recalculatePositions();
                        }, 500);
                    }, 100);
                } else {
                    scrollToTabBlock();
                    
                    setTimeout(() => {
                        ignoreHide = false;
                        recalculatePositions();
                    }, 500);
                }
            });
        }
    }

    function setFixed() {
        if (isFixed) return;
        
        tabBlock.style.position = 'fixed';
        tabBlock.style.top = '0';
        tabBlock.style.left = '0';
        tabBlock.style.right = '0';
        tabBlock.style.zIndex = '10000';
        tabBlock.style.backgroundColor = '#fff';
        tabBlock.style.boxShadow = '0 2px 10px rgba(0,0,0,0.1)';
        
        placeholder = document.createElement('div');
        placeholder.style.height = tabBlockHeight + 'px';
        placeholder.style.visibility = 'hidden';
        placeholder.className = 'uc-tab-placeholder';
        tabBlock.parentNode.insertBefore(placeholder, tabBlock.nextSibling);
        
        isFixed = true;
        isHidden = false;
        showTabBlock();
    }

    function removeFixed() {
        if (!isFixed) return;
        
        tabBlock.style.position = '';
        tabBlock.style.top = '';
        tabBlock.style.left = '';
        tabBlock.style.right = '';
        tabBlock.style.zIndex = '';
        tabBlock.style.backgroundColor = '';
        tabBlock.style.boxShadow = '';
        
        if (placeholder && placeholder.parentNode) {
            placeholder.remove();
        }
        placeholder = null;
        
        isFixed = false;
        isHidden = false;
        showTabBlock();
    }
    
    function hideTabBlock() {
        if (ignoreHide || isHidden) return;
        
        tabBlock.style.opacity = '0';
        tabBlock.style.visibility = 'hidden';
        tabBlock.style.pointerEvents = 'none';
        isHidden = true;
    }

    function showTabBlock() {
        tabBlock.style.opacity = '1';
        tabBlock.style.visibility = 'visible';
        tabBlock.style.pointerEvents = 'auto';
        isHidden = false;
    }
    
    function checkState() {
        const scrollY = window.pageYOffset;
        
        if (isFixed && scrollY < originalTabBlockTop) {
            removeFixed();
            return;
        }
        
        if (!isFixed && scrollY >= originalTabBlockTop) {
            setFixed();
        }
        
        if (!isFixed) return;

        if (lastTargetElement && !ignoreHide) { 
            const elementTop = getAbsoluteOffsetTop(lastTargetElement);
            const elementHeight = lastTargetElement.offsetHeight;
            const elementBottom = elementTop + elementHeight;
            
            const elementBottomInViewport = elementBottom - scrollY;
            const hideThreshold = tabBlockHeight + 10;
            
            if (elementBottomInViewport <= hideThreshold) {
                hideTabBlock();
            }
            else if (elementBottomInViewport > hideThreshold && isHidden) {
                showTabBlock();
            }
        }
    }
    
    function handleScroll() {
        requestAnimationFrame(checkState);
    }
    
    function handleResize() {
        setTimeout(() => {
            updateOriginalPosition();
            
            const targetIds = getTargetIds();
            if (targetIds.length > 0) {
                findLastElement(targetIds);
                checkState();
            }
        }, 150);
    }

    setTimeout(init, 100);
    
    window.addEventListener('scroll', handleScroll);
    //window.addEventListener('resize', handleResize);
    
    window.addEventListener('load', function() {
        setTimeout(init, 500);
    });
 
    })();    
});    
</script>