sticky定位不触发transform，需用scroll-driven animation或js监听滚动实现缩放；现代方案用@scroll-timeline（chrome 115+/safari 17.4+），兼容方案用intersectionobserver+requestanimationframe。
sticky 定位本身不触发 transform，必须用 scroll-driven animation 或 JS 绑定
很多人以为给 position: sticky 元素直接加 transform: scale() 就能随滚动缩放，实际不会动——sticky 只控制定位行为，不产生滚动进度信号。苹果官网那种「元素在视口内平滑缩放」效果，本质是把滚动位置映射为缩放值，需要显式绑定滚动驱动或监听 scroll 事件。
现代方案首选 CSS @scroll-timeline + animation，但兼容性有限（Chrome 115+、Safari 17.4+）；若需全浏览器支持，得用 IntersectionObserver 或 requestAnimationFrame + getBoundingClientRect() 手动计算。
用 @scroll-timeline 实现声明式缩放（Chrome / Safari 最新版）
这是最接近“纯 CSS”实现的方式，无需 JS，但要求父容器有明确滚动上下文（如 overflow-y: auto），且目标元素必须是 sticky 的子元素或同级可动画元素。
-
@scroll-timeline必须定义在根作用域（不能嵌套在 class 或媒体查询里） - 滚动源（
source）要指向有滚动条的容器，不是window——苹果官网是整个body滚动，所以用source: selector(body) - 缩放范围建议设为
0% 100%对应scale(1) → scale(0.8)，避免缩到 0 或负值导致布局塌陷 - 动画需用
animation-timeline: scroll-timeline-name显式绑定，不能靠 class 触发
@scroll-timeline scroll-zoom {
source: selector(body);
orientation: "vertical";
start: 0px;
end: 100vh;
}
<p>.sticky-target {
position: -webkit-sticky;
position: sticky;
top: 50vh;
animation: zoom-in 1s linear;
animation-timeline: scroll-zoom;
}</p><p>@keyframes zoom-in {
from { transform: scale(1); }
to { transform: scale(0.8); }
}</p>
用 IntersectionObserver + transform 实现兼容方案
当需要支持 Firefox 或旧版 Safari，IntersectionObserver 是更稳的选择：它能精确拿到元素进入/离开视口的比例（intersectionRatio），再映射为 scale 值。注意它不监听滚动像素，而是基于可见区域比例，所以更适合「视口内缩放」这类场景。
- 必须设置
threshold: [0, 0.1, ..., 1]多档阈值，否则intersectionRatio只有 0/1 两个值 - 缩放计算推荐用
scale(1 - ratio * 0.2)这类线性映射，避免突变 - 别直接在
callback里改style.transform——会触发同步布局抖动，应统一用requestAnimationFrame节流 - 如果目标元素是
sticky，确保其父容器有height或min-height，否则IntersectionObserver可能误判可见性
const observer = new IntersectionObserver(
(entries) => {
entries.forEach(entry => {
requestAnimationFrame(() => {
const ratio = entry.intersectionRatio;
entry.target.style.transform = `scale(${1 - ratio * 0.2})`;
});
});
},
{ threshold: Array.from({length: 11}, (_, i) => i * 0.1) }
);
<p>observer.observe(document.querySelector('.sticky-target'));</p>
sticky + scale 同时使用时的常见布局崩坏点
缩放后的元素仍占原始空间，但视觉尺寸变小，容易和周围内容重叠或错位——这不是 bug，是 CSS transform 的正常行为（不影响文档流）。苹果官网之所以不崩，是因为他们把缩放元素包裹在固定尺寸容器里，并用 transform-origin 控制缩放中心点。
- 务必设置
transform-origin: center，否则默认从左上角缩放，视觉偏移严重 - 如果缩放后下方内容上浮，说明父容器没预留足够高度 —— 可给父容器加
padding-bottom: 20vh占位 - 不要对
sticky元素本身设width: 100%后再缩放，会导致内部文字换行异常；优先用max-width+margin: auto - Safari 对
sticky+transform的图层合成较敏感，偶尔闪屏，加will-change: transform可缓解（但别滥用）
真正难的不是让元素缩放，而是让缩放节奏和滚动惯性匹配、缩放中心稳定、边缘过渡不跳变——这些细节全靠反复调 timing-function 和缩放系数，没有通用参数，只能一帧一帧看。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
