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's debounce.

的内容

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

滚动时更改文本大小

1 个答案: