滚动时更改文本大小

Question

我想实现以下目标：

在移动设备上，当有人开始从顶部滚动时，文本开始缩小，在给定数量后，它会采用其最终大小，并在页面的其余部分保持原样。这个想法是，我在屏幕中间有一个公司名称，滚动时，它缩小到屏幕的左上角，后面出现一个菜单栏，公司名称成为菜单栏上的徽标。菜单栏的背景是页面的主图像。这是我的代码：

window.onscroll = scrolled
function scrolled(){
let fromTop = window.scrollY
if (fromTop < 300) {
heroText.style.fontSize = `${2 - fromTop/160}em`
hero.classList.remove('hero-fixed')
heroNav.classList.remove('hero-nav-fixed')
heroText.classList.remove('h1-fixed')
heroImg.classList.remove('hero-img-fixed')
} else {
hero.classList.add('hero-fixed')
heroNav.classList.add('hero-nav-fixed')
heroText.classList.add('h1-fixed')
heroImg.classList.add('hero-img-fixed')
}
if (fromTop > 360) {
heroNav.classList.add('nav-mobile', 'hidden')
intro.classList.add('intro-fixed')
hamburger.classList.remove('hidden')
} else {
hamburger.classList.add('hidden')
heroNav.classList.remove('nav-mobile','hidden')
intro.classList.remove('intro-fixed')
}
}

}

它可以工作，但我必须针对我想要支持的每个屏幕尺寸进行调整，而且它非常滞后！这可能是一种非常错误的方法，所以有人可以帮助我提高它在移动设备上的效率和延迟吗？

我的猜测是，不断调整文本大小是问题之一，以及英雄图像的高度变化。我玩弄 CSS 中的位置固定和填充顶部更改，以补偿消失(成为固定位置(元素。

一些库，如RxJS可以提供帮助，或者是否有一个VanillaJS优雅的解决方案？

Answer 1

为了使Javascript端更有效率，你可以使用类似lodash的debounce的东西。

更改布局可能是一个非常耗费资源的操作，因此您可能希望尝试始终保持元素的固定位置，并且仅使用 CSS transform 属性调整其大小(和/或其父级的大小(。 scale(( 在这里会很好地工作。