CSS怎样固定页眉滚动压缩？transform-scale动态缩放

<header id="mainHeader">
    <div class="header-content">
        <h1 class="logo">我的网站</h1>
        <nav>
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">产品</a></li>
                <li><a href="#">关于我们</a></li>
                <li><a href="#">联系</a></li>
            </ul>
        </nav>
    </div>
</header>
<div class="page-content">
    <!-- 大量内容，确保页面可滚动 -->
    <p>这里是页面的主要内容...</p>
    <p>滚动页面查看页眉效果...</p>
    <!-- 更多内容 -->
</div>

body {
    margin: 0;
    padding-top: 80px; /* 预留页眉高度，避免内容被遮挡 */
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
}

#mainHeader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px; /* 初始高度 */
    background-color: #333;
    color: white;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease-out; /* 所有属性平滑过渡 */
    overflow: hidden; /* 防止内容溢出，尤其是在缩放时 */
    transform-origin: top center; /* 缩放的原点 */
}

#mainHeader .header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 90%;
    max-width: 1200px;
    padding: 0 20px;
    /* 内部元素也需要过渡，或者通过外部的transform来统一控制 */
    transition: all 0.3s ease-out;
}

#mainHeader .logo {
    margin: 0;
    font-size: 2em; /* 初始字体大小 */
    transition: font-size 0.3s ease-out;
}

#mainHeader nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

#mainHeader nav ul li {
    margin-left: 20px;
}

#mainHeader nav ul li a {
    color: white;
    text-decoration: none;
    font-size: 1em;
    transition: font-size 0.3s ease-out;
}

/* 页面内容样式，确保足够长 */
.page-content {
    height: 2000px; /* 示例高度 */
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    margin: 20px;
}

document.addEventListener('DOMContentLoaded', () => {
    const header = document.getElementById('mainHeader');
    const logo = header.querySelector('.logo');
    const navLinks = header.querySelectorAll('nav ul li a');
    const initialHeaderHeight = 80; // 与CSS中设置的初始高度一致
    const scrollThreshold = 100; // 滚动多少像素开始完全压缩
    const minHeaderHeight = 50; // 压缩后的最小高度
    const minScale = 0.8; // 压缩后的最小缩放比例
    const minLogoFontSize = 1.2; // 压缩后logo最小字体
    const minNavLinkFontSize = 0.8; // 压缩后导航链接最小字体

    function updateHeader() {
        const scrollY = window.scrollY;

        // 计算高度和缩放比例
        // 这里的逻辑是，当滚动距离达到阈值时，高度和缩放比例达到最小值
        // 否则，根据滚动距离进行线性插值
        let currentHeight = Math.max(minHeaderHeight, initialHeaderHeight - scrollY * ((initialHeaderHeight - minHeaderHeight) / scrollThreshold));
        let currentScale = Math.max(minScale, 1 - scrollY * ((1 - minScale) / scrollThreshold));
        let currentLogoFontSize = Math.max(minLogoFontSize, 2 - scrollY * ((2 - minLogoFontSize) / scrollThreshold)); // 初始2em
        let currentNavLinkFontSize = Math.max(minNavLinkFontSize, 1 - scrollY * ((1 - minNavLinkFontSize) / scrollThreshold)); // 初始1em

        // 应用样式
        header.style.height = `${currentHeight}px`;
        // 使用 transform: scale() 配合调整内部元素的字体大小，效果会更自然
        // 直接对header应用scale会把所有内容都缩放，可能导致文字模糊或过小
        // 这里选择对header应用高度变化，并对内部元素应用transform和字体大小变化
        // 如果非要对header整体做transform: scale，则需要更复杂的计算来保持内部元素的可读性
        // 考虑到要求，我们尝试对header-content进行缩放，同时调整logo和链接的字体
        // 这是一个折衷方案，因为纯粹的transform: scale()对文字不友好

        // 实际操作中，更常见的做法是只改变高度和padding，或对内部logo做transform
        // 如果坚持对整个header应用transform: scale，那么它的高度就不需要变了
        // 而是通过padding-top/bottom来模拟高度变化，同时调整transform-scale
        // 这里的方案是：header高度变化，header-content进行scale，logo和导航字体也变化

        // 调整 header-content 的 transform: scale
        header.querySelector('.header-content').style.transform = `scale(${currentScale})`;

        // 调整 logo 和导航链接的字体大小
        logo.style.fontSize = `${currentLogoFontSize}em`;
        navLinks.forEach(link => {
            link.style.fontSize = `${currentNavLinkFontSize}em`;
        });

        // 当滚动距离超过阈值时，确保样式固定在最小值
        if (scrollY >= scrollThreshold) {
            header.style.height = `${minHeaderHeight}px`;
            header.querySelector('.header-content').style.transform = `scale(${minScale})`;
            logo.style.fontSize = `${minLogoFontSize}em`;
            navLinks.forEach(link => {
                link.style.fontSize = `${minNavLinkFontSize}em`;
            });
        }
    }

    // 使用 requestAnimationFrame 优化滚动性能
    let ticking = false;
    window.addEventListener('scroll', () => {
        if (!ticking) {
            window.requestAnimationFrame(() => {
                updateHeader();
                ticking = false;
            });
            ticking = true;
        }
    });

    // 页面加载时执行一次，以防页面初始不是在顶部
    updateHeader();
});

scale

margin-top