原型设计工具Axure RP入门教程（七）：滚动激活的Sticky Header教程

---

Axure RP是一套专门为网站或应用程序所设计的快速原型设计工具， 可以让应用网站策划人员或网站功能界面设计师更加快速方便的建立Web AP和Website的线框图、流程图、原型和规格。

免费下载Axure RP 优惠购买Axure RP

---

在本教程中，您将学习如何制作一个页眉，当页面向下滚动时，该标题保持在适当的位置，而当页面滚动回顶部时，该标题不显示。

小部件设置

创建滚动标题

• 画一个新的RP文件，然后在画布上打开Page 1。
• 将四个按钮小部件拖到画布上，将它们水平对齐并放置在（0,200）。
• 选择这所有的四个按钮小部件，然后单击顶部工具栏中的分组以将它们分组。
• 将组命名为滚动标题。

创建一个Sticky Header

• 复制滚动页眉组，并将其副本粘贴到（0,0）的画布上。 将副本命名为Sticky Header内容。
• 右键单击新组，然后在上下文菜单中选择创建动态面板。
• 将新的动态面板命名为Sticky Header。
• 在样式窗格中，单击固定到浏览器。
• 在出现的对话框中，选中固定到浏览器窗口框。
• 如果页面居中对齐（默认），则将水平针设置为居中。
• 如果页面左对齐，则将水平针设置为左。
• 单击确定关闭对话框。

页面的内容足够滚动
将热点窗口小部件拖动到画布上，并将其放置在（0,4000）。 这将使页面在Web浏览器中可滚动，但是热点窗口小部件将不可见。

隐藏Sticky Header，直到页面向下滚动

使Sticky Header默认为隐藏

• 选择粘性页眉动态面板，然后单击样式窗格或样式工具栏中的隐藏图标。

滚动页面时显示Sticky Header

• 单击画布上的空白处以选择页面本身，然后在交互窗格中单击新建交互。
• 在出现的列表中选择滚动窗口事件，然后选择显示/隐藏操作。
• 在目标下拉列表中选择Sticky Header动态面板。
• 保持显示为选中状态，然后单击确定以保存操作。

在页面滚动时隐藏滚动标题

• 将鼠标悬停在显示/隐藏操作上，然后单击出现的添加目标按钮。
• 在目标下拉列表中选择滚动标题组。
• 选择隐藏，然后单击确定以保存操作。

添加条件以检查页面的滚动位置

• 将鼠标悬停在交互窗格中滚动窗口标题上，然后单击右侧的启用案例。在出现的条件构建器对话框中，将案例命名为向下滚动，然后单击添加逻辑。

• 在出现的条件行中，在第一个下拉列表中选择值。然后单击第二个字段右侧的fx图标以打开编辑文本对话框。

• 在对话框顶部，单击插入变量或函数。在出现的列表中，在窗口标题下选择Window.scrollY。

•  对话框顶部的字段现在应显示为：[[Window.scrollY]]。（此括号表达式表示页面在Web浏览器中垂直滚动的像素数。）

• 单击确定关闭编辑文本对话框。

• 在条件行的第三个字段中，选择大于或等于。在右侧的字段中，输入200。

• 现在，条件构建器对话框底部的摘要应显示为： if "[[Window.scrollY]]" is greater than or equals "200"。当页面向下滚动200个像素时（即位于（0,200）的滚动标题组到达页面顶部时），将满足此条件。隐藏该组并同时显示Sticky Header动态面板将使页眉停止滚动。

• 单击确定关闭条件生成器对话框。

预览互动

预览页面并向下滚动。页眉到达页面顶部后应固定在原处。

页面向上滚动时，再次显示滚动标题

添加第二个窗口滚动案例

返回Axure RP，将鼠标悬停在交互窗格中的滚动窗口标题上，然后单击右侧的添加案例。在出现的条件构建器对话框中，将案例命名为向上滚动，然后单击确定而不添加任何逻辑。

注意：即使我们没有为这种情况设置条件，它的条件为ELSE IF true。如果没有通过第一种情况（当页面向上滚动超过Y = 200时），则将触发这种情况（也称为默认情况）。

显示滚动标题组

• 单击窗口滚动块底部的插入动作图标，然后在出现的列表中选择显示/隐藏动作。
• 在目标下拉列表中选择滚动标题组。
• 保持显示为选中状态，然后单击确定以保存操作。

隐藏Sticky Header动态面板

• 将鼠标悬停在显示/隐藏操作上，然后单击出现的添加目标按钮。
• 在目标下拉列表中选择Sticky Header动态面板。
• 选择隐藏，然后单击确定以保存操作。

预览互动

预览页面并向上和向下滚动。向下滚动足够远时，页眉应保持在原位，然后在滚动回页面顶部时，应再次松开。

---

关注慧聚IT微信公众号???，了解产品的最新动态及最新资讯。