在本教程中,你将学习如何制作一个页头,当页面向下滚动时,页头固定在指定位置,当页面向上滚动回到顶部时,页头又会取消固定。【原型预览】
1、元件设置
创建一个滚动页头
![](http://www.raedme.cn/wp-content/uploads/2019/05/滚动时页头固定1.png)
- 打开一个新的RP文件,并在画布中打开Page 1。
- 拖拽四个按钮元件到画布中,将它们水平排列,并放在坐标为(0,200)的位置。
- 选中全部四个按钮元件,然后点击顶部工具栏中的组合,将它们编为一组。
- 将元件组合命名为“滚动页头”。
创建一个固定页头
![](http://www.raedme.cn/wp-content/uploads/2019/05/滚动时页头固定2.png)
- 复制滚动页头组合,然后放在坐标为(0,0)的位置,并将它命名为“固定页头内容”。
- 在组合上点击鼠标右键,在弹出的右键菜单中选择转换为动态面板。
- 设置动态面板的名称为“固定页头”。
- 在样式面板中,点击固定到浏览器。
- 在弹出的对话框中,勾选固定到浏览器窗口,然后选择水平固定为居中。
- 点击确定按钮关闭对话框。
![](http://www.raedme.cn/wp-content/uploads/2019/05/滚动时页头固定10.png)
注意:动态面板是唯一可以固定到浏览器窗口的元件,所以固定页头的元件必须放入动态面板中。
设置足够长的内容以使页面可以滚动
- 拖拽一个热区元件到画布中,放在坐标为(0,4000)的位置,这样可以使页面在Web浏览器中可以滚动,但是并不会看到热区元件。
![](http://www.raedme.cn/wp-content/uploads/2019/05/滚动时页头固定3.png)
2、在页面向下滚动之前隐藏固定页头
默认情况下隐藏固定页头
- 选中固定页头动态面板,点击样式工具栏或样式面板中红的隐藏图标。
页面滚动时显示固定页头
- 点击画布空白区域以选中页面本身,点击交互面板中的新建交互。
- 在弹出的列表中选择窗口滚动时事件,然后选择显示/隐藏动作。
- 在目标下拉列表中选择固定页头动态面板。
- 保留显示选项,然后点击确定按钮保存操作。
![](http://www.raedme.cn/wp-content/uploads/2019/05/滚动时页头固定4.png)
页面滚动时隐藏滚动页头
- 将鼠标悬停在显示/隐藏动作上,然后点击添加目标按钮。
- 在目标下拉列表中选择滚动页头组合。
- 选择隐藏选项,然后点击确定按钮保存操作。
![](http://www.raedme.cn/wp-content/uploads/2019/05/滚动时页头固定5.png)
添加条件以检查页面的滚动位置
![](http://www.raedme.cn/wp-content/uploads/2019/05/滚动时页头固定6-1024x403.png)
- 在交互面板中,将鼠标悬停在窗口滚动时事件的标题上,然后点击右侧的启用情形。在弹出的情形编辑对话框中,设置情形名称为“向下滚动”,然后点击添加条件。
- 在条件行中,第一个下拉列表选择值,然后点击第二个字段右侧的fx图标来打开编辑文本对话框。
- 在对话框的顶部,点击插入变量或函数,在弹出的列表中,选择窗口下的Window.ScrollY。
这时候对话框顶部的文本区域中会显示:[[Window.ScrollY]]。(括号中的表达式代表着页面在Web浏览器中垂直滚动的像素数。)
- 点击确定按钮关闭编辑文本对话框。
- 在条件行的第三个字段中,选择大于等于(>=),然后在最右边的字段中输入200。
这时候情形编辑对话框底部的摘要部分会显示:如果”[[Window.ScrollY]]”>=”200”。当页面向下滚动200像素时,也就是位于坐标(0,200)的滚动页头达到页面顶部时,就会触发该情形。隐藏滚动页头组合的同时会显示固定页头动态面板,这将使页头不再随页面滚动。
- 点击确定按钮关闭编辑情形对话框。
3、预览交互
预览页面,然后向下滚动页面。当页头到达页面顶部时,它就会固定在顶部。
4、当页面向上滚动时重新显示滚动页头
添加第二个窗口滚动时情形
![](http://www.raedme.cn/wp-content/uploads/2019/05/滚动时页头固定7-1024x407.png)
- 回到Axure RP,在交互面板中,将鼠标悬停在窗口滚动时的标题上,点击右侧出现的添加情形,在弹出的情形编辑对话框中,设置情形名称为“向上滚动”,然后点击确定按钮(不添加任何条件)。
备注:注意即使我们没有给这个情形添加任何条件,它仍然有一个“否则 如果 真”的条件。当第一个情形没有发生时(也就是页面向上滚动Y坐标超过了200)就会发生该情形,也就是“默认”情形。
显示滚动页头组合
![](http://www.raedme.cn/wp-content/uploads/2019/05/滚动时页头固定8.png)
- 在窗口滚动时区域的底部,点击插入动作图标,然后在弹出的列表中选择显示/隐藏动作。
- 在目标下拉列表中选择滚动页头组合。
- 保留显示选项,点击确定按钮保存操作。
隐藏固定头部动态面板
- 将鼠标悬停在显示/隐藏动作上,点击出现的添加目标按钮。
- 在目标下拉列表中选择固定头部动态面板。
- 选择隐藏选项,点击确定按钮保存操作。
![](http://www.raedme.cn/wp-content/uploads/2019/05/滚动时页头固定9.png)
5、预览交互
预览页面,然后上下滚动页面。当你向下滚动页面到一定程度时,页头就会固定在顶部,当你将页面向上滚动回顶部时,页头又会取消固定随页面滚动。