如何创建一个可响应滚动的固定页眉

你可能已经注意到，很多移动应用都在使用粘性页眉体验。以网页浏览器为例——当你向下滚动时，页眉和周围按钮会隐藏起来；当你向上滚动时，它们又会滑回出现。无论页面是图片流、有趣的博客文章，还是购物时可浏览的商品列表，这种体验都能让用户更沉浸于内容本身。

在向下滚动时部分（或完全）隐藏页眉，可以帮助用户在屏幕上看到更多内容。这正是它如此令人愉悦且受欢迎的原因。而更棒的是，在 ProtoPie 中创建这种真实体验非常简单。你只需要一个用于检查滚动方向的条件。借助 ProtoPie 内置的公式和条件功能，你很快就能完美实现这种体验！

概览

• 你将学到什么

• 创建粘性页眉的分步指南

• 提示与技巧

• 就是这样！你已经原型出了一个粘性页眉

你将学到什么

1. 创建滚动容器以实现可滚动视图

2. 检测滚动容器的滚动属性

3. 使用条件以及 $touchVelocityY > 0 和 $touchVelocityY < 0 公式来检查滚动方向

4. 根据滚动方向添加不同交互

最后，你将能够做出类似这样的效果！

创建粘性页眉的分步指南

1. 创建滚动容器以实现可滚动视图

在这里，我们将创建一个启用滚动的基础页面。

1. 在工具栏中，进入 Container，然后选择 Scroll Container。这会创建一个启用滚动的容器。我们将这个容器重命名为“Scroll”。这有助于我们在后续步骤中更容易找到它。

2. 拖拽任一角点来缩放 Scroll 容器，直到足够大以覆盖屏幕。或者，你也可以直接输入尺寸 393 x 852，并将位置设置为 0,0。我们需要将容器缩放到适配屏幕，因为只有容器存在的区域才能进行滚动检测。在这个示例中，我们将使用全屏。

3. 在图层面板中拖拽 Scroll，将 Scroll 图层重排到 Card list 图层正上方。这有助于防止卡片不可见区域出现不必要的点击。

4. 现在在图层面板中，将 Card list 图层拖入 Scroll 内。这是让 Card list 图层可滚动的最后一步。

5. 按下工具栏中的 Preview 进行测试。

2. 检测滚动容器的滚动属性

这一步将帮助交互在场景内容滚动时生效。

　1. 在交互面板中，点击 Add Trigger，并添加 Detect。在触发器属性面板中，确保所选图层为 Scroll，并将默认值从 X 改为 Scroll。

• 将值改为 Scroll 后，触发器会检测所选图层滚动位置的任何变化。如果我们选择的是 X，触发器将检测所选图层 X 位置的变化。但图层 **Scroll **的 X 位置根本不会变化，因此 Detect 触发器不会产生任何响应。

3. 使用条件和公式检查滚动方向

现在我们已经可以检测图层 Scroll 何时发生滚动，接下来将设置一个条件，以便根据滚动方向——向上和向下——触发不同响应。

1. 在交互面板中，在 Detect 触发器下，按 + 添加新响应。选择 Condition。

2. 在条件的属性面板中，点击图层下拉菜单，并将其改为 Formula。

　3. 点击公式栏，并点击 **fx ** 打开公式助手。输入：$touchVelocityY

$touchVelocityY 返回手指（或鼠标）在移动中（沿 Y 轴）的触摸速度。因此，它也可以告诉我们移动发生的方向。例如，向下滚动时数值为 < 0，向上滚动时数值为 > 0。

$touchVelocityY 会在整个屏幕范围内检查触摸。

4. 根据滚动方向添加不同交互

1. 对于第一个条件，我们希望在内容向下滚动时设置交互。在条件属性面板中，选择 <（小于），并将值设为 0。在交互面板中，你会看到条件 $touchVelocityY < 0。这意味着该条件下的所有响应会在触摸速度为负时生效，换句话说，就是向下滚动时生效。

2. 在交互面板中，点击 Detect 下的 +，添加一个 Move 响应。选择图层 tabBar，并将其设置为在 Y 轴上 Move To 位置 852。X 坐标可以留空。这样在向下滚动时，tabBar 图层会移动到屏幕底部。

3. 我们还希望移动 Header 图层。因此，在交互面板中，点击 Detect 下的 +，再添加一个 Move 响应。这次选择 Header 图层，并将其设置为在 Y 轴上 Move To 位置 0。这样在向下滚动时，Header 图层会移动到屏幕顶部。

最后，我们希望在向上滚动时让这两个图层回到原位。点击 Detect 下的 +，再添加一个 Condition。再次输入公式 $touchVelocityY。但这次选择 > 并将值设为 0。

在交互面板中，你会看到另一个条件：$touchVelocityY > 0。

这将帮助你设置向上滚动时的交互。现在你可以重复前面的 Move 响应，把两个图层移回原始位置，或者使用（非常酷的）Reset 响应，具体如下。

💡 提示与技巧

在向上滚动时，我们可以不用再次使用 Move 响应，而是通过使用 Reset 响应来最大化效率。

1. 点击 Detect 下的 +，并选择 Reset。将其设置为图层 tabBar。为了让此场景的过渡更真实，将 Easing 设为 Ease out。同样地，再添加一个 Reset 响应，但将其设置为图层 Header。

2. Reset 响应会重置所选图层，并使其回到原始位置和状态。

就是这样！你已经原型出了一个粘性页眉

现在你已经掌握了在 ProtoPie 中创建粘性页眉的方法，接下来就可以构建更具动态性和交互性的原型了。别止步于此——探索 ProtoPie 的全部潜力，让你的创意想法真正落地。