核心布局原理：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结构中：
- .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 
