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

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

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

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

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

// 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. 布局结构

   <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 中添加移动端优化：

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      screens: {
        'lg': '1024px' // 大屏才启用左右布局
      }
    }
  }
}

更新组件代码：

<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. 父容器限制

   <!-- 合法 -->
   <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兼容

   .sticky-element {
     position: -webkit-sticky; /* Safari 支持 */
     position: sticky;
   }

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