Aceternity Sticky Scroll Reveal 组件介绍

本文介绍 Aceternity UI 的 Sticky Scroll Reveal 组件，一个基于 React、Tailwind CSS 和 Framer Motion 的粘性滚动展示组件。该组件可以在滚动时保持内容固定，同时逐步揭示不同区块的文本内容，非常适合产品特性展示、功能介绍等场景。

组件简介

Sticky Scroll Reveal 是一个粘性滚动容器组件，当用户滚动页面时，右侧内容区域会固定在视口顶部，而左侧的文本内容会随滚动逐步切换显示。这种交互模式非常适合展示产品的多个特性或功能点，让用户在滚动过程中逐一了解各项内容。

核心特性

粘性定位：右侧内容区域在滚动时保持固定
渐进式揭示：文本内容随滚动逐步切换，创造流畅的阅读体验
高度可定制：支持自定义内容、样式和动画效果
TypeScript 支持：完整的类型定义，开发体验友好
响应式设计：适配各种屏幕尺寸
Shadcn CLI 兼容：支持通过 Shadcn CLI 一键安装

安装指南

使用 CLI 安装（推荐）

bash

npx shadcn@latest add @aceternity/sticky-scroll-reveal

手动安装

复制组件源代码到你的项目
安装依赖：framer-motion
配置 Tailwind CSS

使用示例

基础用法

tsx

import { StickyScroll } from "@/components/ui/sticky-scroll-reveal";

const content = [
  {
    title: "协作编辑",
    description:
      "与团队成员、客户和利益相关者实时协作。在文档上共同工作，分享想法，快速做出决策。",
    content: (
      <div className="h-full w-full bg-[linear-gradient(to_bottom_right,var(--cyan-500),var(--emerald-500))] flex items-center justify-center text-white">
        协作编辑
      </div>
    ),
  },
  {
    title: "实时变更",
    description:
      "实时查看变更。通过我们的平台，你可以追踪每一次修改。不再为版本控制而混乱。",
    content: (
      <div className="h-full w-full bg-[linear-gradient(to_bottom_right,var(--orange-500),var(--yellow-500))] flex items-center justify-center text-white">
        实时变更
      </div>
    ),
  },
  {
    title: "版本控制",
    description:
      "体验实时更新，再也不用担心版本控制。我们的平台确保你始终在处理项目的最新版本。",
    content: (
      <div className="h-full w-full bg-[linear-gradient(to_bottom_right,var(--blue-500),var(--indigo-500))] flex items-center justify-center text-white">
        版本控制
      </div>
    ),
  },
];

export default function Page() {
  return (
    <div className="p-10">
      <StickyScroll content={content} />
    </div>
  );
}

Props 参数

参数名	类型	说明
`content`	`Array<{title: string, description: string, content: React.ReactNode}>`	内容数组，用于渲染粘性滚动组件内部的子元素
`contentClassName`	`string`	右侧固定容器的 className

实现原理

组件主要利用以下技术实现：

CSS Sticky 定位：右侧内容区域使用 position: sticky 保持在视口顶部
Framer Motion：用于处理文本内容的过渡动画效果
滚动监听：通过滚动位置计算当前应该显示的内容索引
Intersection Observer：检测内容区块的可见性，触发切换

适用场景

产品特性展示：逐一介绍产品的各项功能特性
服务流程说明：展示服务的使用步骤或流程
案例研究：分阶段展示项目案例的不同方面
功能对比：对比不同版本或方案的功能差异

注意事项

确保已安装 framer-motion 依赖
内容数组至少需要 2 个元素才能体现滚动效果
右侧内容区域的高度会影响粘性效果的表现
建议在桌面端使用，移动端可适当调整布局

字节笔记本