Benny的泥坑

探索n8n工作流和AI技术

基于 Next.js 和 Tailwind CSS 实现左右容器滚动联动效果

本文介绍了如何在 Next.js 和 Tailwind CSS 项目中实现电商网站常见的左右容器滚动联动效果，通过 position: sticky 技术实现低高度侧边栏先固定、高高度内容区域滚动到底部后整体联动的交互体验，并提供了完整的代码示例和关键实现解析。

很多的电商项目中，会有容器动态联动的效果，而我的项目是用到的nextjs和tailwindcss，所以就写了这个示例，其中这个联动的效果蛮好的。

以下是一个基于 Next.js 和 Tailwind CSS 实现左右容器滚动联动效果的完整示例代码，使用 position: sticky 实现低高度容器先固定、高高度容器滚动到底部后联动的效果：

很多的电商项目中，会有容器动态联动的效果，而我的项目是用到的nextjs和tailwindcss，所以就写了这个示例，其中这个联动的效果蛮好的。

以下是一个基于 Next.js 和 Tailwind CSS 实现左右容器滚动联动效果的完整示例代码，使用 position: sticky 实现低高度容器先固定、高高度容器滚动到底部后联动的效果：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
// pages/sticky-demo.tsx
import React from 'react';

export default function StickyLayoutDemo() {
  return (
    <div className="min-h-screen bg-gray-50 p-6">
      {/* 主容器 - 左右布局 */}
      <div className="container mx-auto flex gap-8">
        {/* 左侧容器 (低高度) */}
        <aside className="w-1/4">
          <div className="sticky top-6 h-fit rounded-lg border bg-white p-6 shadow-md transition-all duration-300">
            <h2 className="mb-4 text-xl font-bold text-gray-800">分类导航</h2>
            {[...Array(8)].map((_, i) => (
              <div 
                key={i} 
                className="mb-3 cursor-pointer rounded-md p-3 hover:bg-blue-50 hover:text-blue-600"
              >
                <span className="font-medium">分类 {i + 1}</span>
              </div>
            ))}
          </div>
        </aside>

        {/* 右侧容器 (高高度) */}
        <main className="w-3/4">
          <div className="rounded-lg border bg-white p-8 shadow-md">
            <h1 className="mb-6 text-2xl font-bold">内容区域</h1>
            
            {[...Array(15)].map((_, i) => (
              <section key={i} className="mb-12">
                <h2 className="mb-4 flex items-center text-xl font-semibold">
                  <span className="mr-2 rounded-full bg-blue-100 px-3 py-1 text-blue-800">
                    {i + 1}
                  </span>
                  内容区块标题
                </h2>
                <div className="grid grid-cols-3 gap-4">
                  {[...Array(3)].map((_, j) => (
                    <div key={j} className="overflow-hidden rounded-lg border bg-gray-50">
                      <div className="h-40 bg-gray-200"></div>
                      <div className="p-4">
                        <h3 className="font-medium">项目 {j + 1}</h3>
                        <p className="mt-2 text-sm text-gray-600">
                          这里是项目描述文本，展示在内容区域中...
                        </p>
                      </div>
                    </div>
                  ))}
                </div>
              </section>
            ))}
          </div>
        </main>
      </div>
    </div>
  );
}

关键实现解析：

  1. 布局结构

    1
    2
    3
    4
    <div className="flex gap-8">
      <aside className="w-1/4"> {/* 左侧容器 */}
        <div className="sticky top-6 h-fit"> {/* 粘性元素 */}
      <main className="w-3/4"> {/* 右侧容器 */}

  2. 粘性定位核心

    • sticky top-6：距离视口顶部6px时触发固定效果
    • h-fit：高度自适应内容（替代传统 fit-content）

  3. 交互效果

    • 初始状态：左侧导航栏固定在视口中部（top-6）
    • 滚动阶段：右侧内容区域滚动，左侧保持固定
    • 结束阶段：右侧滚动到底部时，左侧跟随滚动

  4. 视觉优化

    • shadow-md：固定时添加阴影增强层次感
    • transition-all duration-300：状态切换时平滑过渡
    • 响应式设计：默认移动端堆叠（需添加响应式断点）

响应式增强

在 tailwind.config.js 中添加移动端优化：

1
2
3
4
5
6
7
8
9
10
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      screens: {
        'lg': '1024px' // 大屏才启用左右布局
      }
    }
  }
}

更新组件代码：

1
2
3
4
5
<div className="flex flex-col gap-8 lg:flex-row">
  <aside className="w-full lg:w-1/4">
    {/* 移动端隐藏粘性效果 */}
    <div className="lg:sticky lg:top-6"> 
  <main className="w-full lg:w-3/4">

注意事项

  1. 父容器限制

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <!-- 合法 -->
    <div style="overflow: visible"> 
      <div class="sticky top-0"></div>
    </div>

    <!-- 失效案例 -->
    <div style="overflow: hidden"> 
      <div class="sticky top-0"></div> {/* 粘性失效 */}
    </div>

  2. 阈值要求

    • 必须指定 top/bottom 等阈值（如 top-6）
    • 父容器高度需大于粘性元素高度

  3. Safari兼容

    1
    2
    3
    4
    .sticky-element {
      position: -webkit-sticky; /* Safari 支持 */
      position: sticky;
    }

此实现参考了京东/淘宝商品分类页的交互模式，左侧导航栏在内容滚动时保持固定，内容滚动到底部后整体联动。实际效果可通过 Next.js 部署 或 CodeSandbox 演示 查看。