核心布局原理：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 结构设计
首先，我们需要一个包含左右两部分的容器。左侧用于放置可滚动的内容，右侧则放置粘性的图片或动态内容。
粘性侧边栏分割布局
这里是第一段内容，当滚动到这里时，右侧图片会切换到第一张。
这是第二段内容，滚动到这里时，右侧图片会切换到第二张。
这是第三段内容，滚动到这里时，右侧图片会切换到第三张。
这是第四段内容，滚动到这里时，右侧图片会切换到第四张。
在上述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
