创建带有粘性侧边栏和滚动驱动内容切换的分割布局教程-js教程-PHP中文网

创建带有粘性侧边栏和滚动驱动内容切换的分割布局教程

心靈之曲

发布： 2025-10-03 12:52:01

原创

367人浏览过

创建带有粘性侧边栏和滚动驱动内容切换的分割布局教程

本教程详细指导如何使用HTML和CSS构建一个响应式分割屏幕布局，其中一侧内容可滚动，另一侧元素（如图片）在滚动时保持粘性。文章将介绍Flexbox布局、position: sticky属性的应用，并探讨如何通过JavaScript实现滚动时内容（如图片）的动态切换效果，帮助开发者实现类似Calendly网站的交互体验。

核心布局原理：Flexbox 与粘性定位

要实现类似Calendly网站的左右分割布局，其中左侧内容可滚动，右侧图片保持粘性并根据滚动内容切换，我们需要结合使用CSS的Flexbox布局和position: sticky属性。

Flexbox 布局 (display: flex): 用于创建左右两栏的分割布局。通过将父容器设置为display: flex，其子元素（左右两栏）可以轻松地并排排列，并利用flex: 1等属性均匀分配宽度。
粘性定位 (position: sticky): 用于使右侧的元素在用户滚动页面时，当其达到视口顶部或指定位置时，保持固定在屏幕上。这需要设置top、bottom、left或right属性来定义粘性区域。
高度控制 (height: 100vh, height: Xvh):
- 粘性元素通常会设置为height: 100vh，使其占据整个视口高度，从而在粘性状态下覆盖整个右侧区域。
- 可滚动内容区域的子元素（例如段落）可以设置一个较大的高度（如height: 50vh），以确保有足够的滚动空间来触发粘性效果和内容切换。

HTML 结构设计

首先，我们需要一个包含左右两部分的容器。左侧用于放置可滚动的内容，右侧则放置粘性的图片或动态内容。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>粘性侧边栏分割布局</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="page-wrapper">
        <!-- 左侧可滚动内容区域 -->
        <div class="scrollable-content">
            <p data-image="image1.jpg">这里是第一段内容，当滚动到这里时，右侧图片会切换到第一张。</p>
            <p data-image="image2.jpg">这是第二段内容，滚动到这里时，右侧图片会切换到第二张。</p>
            <p data-image="image3.jpg">这是第三段内容，滚动到这里时，右侧图片会切换到第三张。</p>
            <p data-image="image4.jpg">这是第四段内容，滚动到这里时，右侧图片会切换到第四张。</p>
            <!-- 可以添加更多内容段落 -->
        </div>

        <!-- 右侧粘性侧边栏 -->
        <div class="sticky-sidebar">
            <div class="sticky-image-container">
                <!-- 初始图片或占位符，通过JS动态切换 -->
                <img src="placeholder.jpg" alt="动态图片" class="active-image">
            </div>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>

登录后复制

在上述HTML结构中：

讯飞智作-讯飞配音

讯飞智作是一款集AI配音、虚拟人视频生成、PPT生成视频、虚拟人定制等多功能的AI音视频生产平台。已广泛应用于媒体、教育、短视频等领域。

查看详情

.page-wrapper 是整个布局的父容器，将使用Flexbox实现左右分割。
.scrollable-content 包含多段文本，每段文本通过data-image属性关联到一张图片，用于后续JavaScript的切换逻辑。
.sticky-sidebar 是右侧的粘性区域，其中.sticky-image-container将用来显示动态切换的图片。

CSS 样式实现

接下来，我们为上述HTML结构添加样式，实现左右分割和粘性效果。

/* style.css */

body {
    margin: 0;
    font-family: sans-serif;
    line-height: 1.6;
    color: #333;
}

.page-wrapper {
    display: flex; /* 启用Flexbox布局 */
    min-height: 100vh; /* 确保容器至少占据整个视口高度 */
    overflow: hidden; /* 防止子元素溢出 */
}

.scrollable-content {
    flex: 1; /* 占据一半宽度 */
    width: 50%; /* 明确指定宽度，与flex:1配合确保50% */
    background-color: #f0f2f5; /* 左侧背景色 */
    padding: 40px;
    box-sizing: border-box; /* 包含padding在内的宽度计算 */
}

.scrollable-content p {
    height: 50vh; /* 每个段落占据视口高度的50%，确保有足够的滚动空间 */
    margin-bottom: 40px; /* 段落间距 */
    display: flex; /* 用于垂直居中内容 */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    font-size: 1.2em

登录后复制

以上就是创建带有粘性侧边栏和滚动驱动内容切换的分割布局教程的详细内容，更多请关注php中文网其它相关文章！