滚动时页头固定 | 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、预览交互

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

评论(0)

发表评论

电子邮件地址不会被公开。 必填项已用*标注