CSS transition如何实现滚动后导航栏缩小-css教程-PHP中文网

transition无法响应滚动行为本身，真正起作用的是“滚动状态检测+类名切换+transition配合”；需用intersectionobserver监听首屏离开视口，再通过css类切换padding、font-size等可过渡属性实现平滑缩小效果。

css transition如何实现滚动后导航栏缩小

直接用 transition 无法响应滚动行为本身——它只负责属性变化时的动画过程，不触发、不监听、不判断滚动位置。真正起作用的是「滚动状态检测 + 类名切换 + transition 配合」这一组合。

为什么不能只靠 transition 写滚动缩小效果

transition 是被动的：它只在某个 CSS 属性（比如 height、padding、font-size）发生改变时，平滑地插值过渡。但滚动本身不会自动改这些值，必须由 JS 或 CSS 机制主动触发变更。

常见误解是写一堆 transition: height 0.3s 就完事了——结果页面一滚，导航栏纹丝不动，因为没人给它加类、没人改样式。

正确做法：用 Intersection Observer 监听首屏区域离开视口

比起监听 scroll 事件（容易卡顿、需节流），IntersectionObserver 更轻量、更语义化，也更适合判断“用户是否已滚过首屏”。

观察目标通常是页面第一个大区块（如 <header class="hero"></header> 或 <section id="intro"></section>）
当它的 intersectionRatio 降到 0（完全移出视口顶部），就说明用户已开始向下滚动
此时给 <nav></nav> 添加一个类，比如 nav-scrolled

示例 JS 片段：

const observer = new IntersectionObserver(
  ([entry]) => {
    document.querySelector('nav').classList.toggle('nav-scrolled', entry.intersectionRatio === 0);
  },
  { threshold: [0, 1] }
);
observer.observe(document.querySelector('.hero'));

CSS 部分：用可过渡属性实现“缩小”，避开 display 和 height 的坑

不要用 display: none/block 或直接设 height ——前者不可动画，后者在内容高度不确定时易导致跳动或截断。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

推荐组合：

padding 缩小（比 height 更安全，不影响布局流）
font-size 微调（配合 logo 容器的 transform: scale()）
line-height 同步缩放（保持文字垂直居中）
所有属性统一加 transition: padding 0.25s ease, font-size 0.25s ease, line-height 0.25s ease

示例 CSS：

nav {
  padding: 1.5rem 2rem;
  font-size: 1.25rem;
  line-height: 1.8;
  transition: padding 0.25s ease, font-size 0.25s ease, line-height 0.25s ease;
}
nav.nav-scrolled {
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  line-height: 1.4;
}