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

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

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

小部件设置

创建滚动标题

• 画一个新的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动态面板。
• 选择隐藏，然后单击确定以保存操作。

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

想要获得Axure RP更多资源、正版授权的伙伴，请咨询【客服】了解

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

标签：

来源：慧都