求助：如何在Swipepages实现类似指定站点的移动端粘性按钮区域

1. 自定义HTML结构 #

在Swipepages中添加「自定义HTML」模块，插入以下代码创建包含两个按钮的容器：

<div class="sticky-button-bar">
  <button class="sticky-btn btn-primary">预约咨询</button>
  <button class="sticky-btn btn-secondary">联系我们</button>
</div>

2. 自定义CSS样式 #

进入Swipepages的「自定义CSS」设置面板，添加以下代码实现粘性定位和按钮样式（可按需调整颜色、尺寸等参数）：

/* 粘性容器核心样式 */
.sticky-button-bar {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 16px;
  background-color: #fff;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.1);
  z-index: 999;
  display: flex;
  gap: 10px;
}

/* 通用按钮样式 */
.sticky-btn {
  flex: 1;
  padding: 14px 0;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

/* 主按钮样式 */
.btn-primary {
  background-color: #007bff;
  color: #fff;
}

/* 次按钮样式 */
.btn-secondary {
  background-color: #f8f9fa;
  color: #007bff;
  border: 1px solid #007bff;
}

/* 移动端触摸反馈 */
.sticky-btn:active {
  transform: scale(0.98);
}

3. 关键说明 #

• 用position: sticky替代fixed，仅当页面滚动到下方时固定在底部，避免遮挡顶部内容
• z-index: 999确保按钮栏始终显示在其他内容上方
• flex: 1让两个按钮自动平分容器宽度，适配不同移动端屏幕
• 可根据目标站点的视觉风格，修改背景色、圆角、阴影等样式参数

内容的提问来源于stack exchange，提问作者alam jahidul