滚动时页头固定 | Scroll Activated Sticky Header

在本教程中，你将学习如何制作一个页头，当页面向下滚动时，页头固定在指定位置，当页面向上滚动回到顶部时，页头又会取消固定。【原型预览】

1、元件设置

创建一个滚动页头

1. 打开一个新的RP文件，并在画布中打开Page 1。
2. 拖拽四个按钮元件到画布中，将它们水平排列，并放在坐标为(0,200)的位置。
3. 选中全部四个按钮元件，然后点击顶部工具栏中的组合，将它们编为一组。
4. 将元件组合命名为“滚动页头”。

创建一个固定页头

1. 复制滚动页头组合，然后放在坐标为(0,0)的位置，并将它命名为“固定页头内容”。
2. 在组合上点击鼠标右键，在弹出的右键菜单中选择转换为动态面板。
3. 设置动态面板的名称为“固定页头”。
4. 在样式面板中，点击固定到浏览器。
5. 在弹出的对话框中，勾选固定到浏览器窗口，然后选择水平固定为居中。
6. 点击确定按钮关闭对话框。

注意：动态面板是唯一可以固定到浏览器窗口的元件，所以固定页头的元件必须放入动态面板中。

设置足够长的内容以使页面可以滚动

1. 拖拽一个热区元件到画布中，放在坐标为(0,4000)的位置，这样可以使页面在Web浏览器中可以滚动，但是并不会看到热区元件。

2、在页面向下滚动之前隐藏固定页头

默认情况下隐藏固定页头

1. 选中固定页头动态面板，点击样式工具栏或样式面板中红的隐藏图标。

页面滚动时显示固定页头

1. 点击画布空白区域以选中页面本身，点击交互面板中的新建交互。
2. 在弹出的列表中选择窗口滚动时事件，然后选择显示/隐藏动作。
3. 在目标下拉列表中选择固定页头动态面板。
4. 保留显示选项，然后点击确定按钮保存操作。

页面滚动时隐藏滚动页头

1. 将鼠标悬停在显示/隐藏动作上，然后点击添加目标按钮。
2. 在目标下拉列表中选择滚动页头组合。
3. 选择隐藏选项，然后点击确定按钮保存操作。

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

1. 在交互面板中，将鼠标悬停在窗口滚动时事件的标题上，然后点击右侧的启用情形。在弹出的情形编辑对话框中，设置情形名称为“向下滚动”，然后点击添加条件。
2. 在条件行中，第一个下拉列表选择值，然后点击第二个字段右侧的fx图标来打开编辑文本对话框。
3. 在对话框的顶部，点击插入变量或函数，在弹出的列表中，选择窗口下的Window.ScrollY。

这时候对话框顶部的文本区域中会显示：[[Window.ScrollY]]。（括号中的表达式代表着页面在Web浏览器中垂直滚动的像素数。）

1. 点击确定按钮关闭编辑文本对话框。
2. 在条件行的第三个字段中，选择大于等于（>=）,然后在最右边的字段中输入200。

这时候情形编辑对话框底部的摘要部分会显示：如果”[[Window.ScrollY]]”>=”200”。当页面向下滚动200像素时，也就是位于坐标(0,200)的滚动页头达到页面顶部时，就会触发该情形。隐藏滚动页头组合的同时会显示固定页头动态面板，这将使页头不再随页面滚动。

1. 点击确定按钮关闭编辑情形对话框。

3、预览交互

预览页面，然后向下滚动页面。当页头到达页面顶部时，它就会固定在顶部。

4、当页面向上滚动时重新显示滚动页头

添加第二个窗口滚动时情形

1. 回到Axure RP，在交互面板中，将鼠标悬停在窗口滚动时的标题上，点击右侧出现的添加情形，在弹出的情形编辑对话框中，设置情形名称为“向上滚动”，然后点击确定按钮（不添加任何条件）。

备注：注意即使我们没有给这个情形添加任何条件，它仍然有一个“否则 如果 真”的条件。当第一个情形没有发生时（也就是页面向上滚动Y坐标超过了200）就会发生该情形，也就是“默认”情形。

显示滚动页头组合

1. 在窗口滚动时区域的底部，点击插入动作图标，然后在弹出的列表中选择显示/隐藏动作。
2. 在目标下拉列表中选择滚动页头组合。
3. 保留显示选项，点击确定按钮保存操作。

隐藏固定头部动态面板

1. 将鼠标悬停在显示/隐藏动作上，点击出现的添加目标按钮。
2. 在目标下拉列表中选择固定头部动态面板。
3. 选择隐藏选项，点击确定按钮保存操作。

5、预览交互

预览页面，然后上下滚动页面。当你向下滚动页面到一定程度时，页头就会固定在顶部，当你将页面向上滚动回顶部时，页头又会取消固定随页面滚动。