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