<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>
<style> body { margin: 0; padding: 0; }
h2 { font-size: 72px; font-family: Helvetica; letter-spacing: -.012em; width: 290px; font-weight: normal;
position: sticky; top: -1px; left: 50%;
margin: 100px 0; padding: 0; transform: scale(clamp(0.15, var(--scale), 1)); transform-origin: 0% 0%; }
.imac img { display: block; position: relative; top: 50%; left: 50%; transform: translate(calc(-50% - 30px), 0); }
.image { position: relative; overflow: hidden; } </style>
</head> <body>
<div class="imac"> <h2 style="--scale: 1">Only 11.5mm. Now that's thin.</h2> <div class="image"> <img src="https://www.apple.com/105/media/us/imac-24/2021/5e004d75-3ad6-4bb9-ab59-41f891fc52f0/anim/design-hero/large/flow/flow_startframe.jpg" alt=""> </div> </div>
<script> let isPinned = false const h2 = document.querySelector('h2')
const observer = new IntersectionObserver(([e]) => { console.log(e, 111) isPinned = (e.intersectionRatio < 1) e.target.classList.toggle('pinned', isPinned) }, { threshold: [1] })
observer.observe(h2)
document.addEventListener('scroll', (e) => { if (isPinned) { let html = document.documentElement let height = parseInt(getComputedStyle(h2).getPropertyValue('height')) + parseInt(getComputedStyle(h2).getPropertyValue('margin-bottom')) let marginTop = parseInt(getComputedStyle(h2).getPropertyValue('margin-top')) let scrolled = (html.scrollTop - marginTop) / height h2.style.setProperty('--scale', (1 - scrolled)) } }) </script>
</body> </html> 标签：isPinned,h2,50%,指定,let,苹果,缩小,font,margin From： https://www.cnblogs.com/xushan03/p/16749062.html