固定头部 | Scroll-Activated Sticky Header

学习如何制作一个头部,当页面向下滚动的时候可以停靠在固定的位置,当页面向上滚回顶部的时候,头部消失。(这个网站有一个固定头部,向下滚动页面即可看到它的效果。)

STEP0:下载练习文件

如果你还没有练习文件,请下载Axure Training.rp并在Axure RP中打开它,该文件包含了Axure培训网站上每个教程的对应页面。我们建议你始终使用我们准备好的文件来学完教程,但是如果你无法保证,那也没有关系,我们也会告诉你在不使用Axure Training.rp文件的情况下,如何创建新文件来完成教程。

STEP1:设置

在练习文件中打开页面“固定头部”。

页面中包含一个名为“滚动头部”的组合。

右键点击这个组合,复制,然后粘贴到页面顶部,设置它的坐标为(20,20),并且命名为“固定头部”。

右键点击“固定头部”,选择“转换为动态面板”,然后给动态面板命名为“固定头部”。

在属性页签下,点击“隐藏”的复选框。

STEP2:固定“固定头部”

在“固定头部”动态面板选中的情况下,切换到属性页签,然后点击“固定到浏览器”。

点击“固定到浏览器”的复选框。

选择“水平固定”的方式为“左”,“垂直固定”的方式为“上”。

点击“确定”按钮关闭固定到浏览器对话框。

STEP3:设置显示固定头部并且隐藏滚动头部的交互

点击画布的空白区域,切换到页面的检视状态。

在属性页签下,双击“窗口滚动时”来创建一个新的窗口滚动时用例。

在用例编辑器的顶部,点击“添加条件”。

在第一个下拉列表中,选择“值”。

点击第二个字段后面的“fx”按钮。

点击“插入变量或函数…”。

在下拉列表中“窗口”下面,点击“Window.scrollY”。

点击“确定”按钮关闭对话框。

在条件设立窗口,点击中间的下拉列表然后选择“>=”。

保持后面一个下拉列表的选项为“值”。

在最后一个字段中,清空文本然后输入数字180。

点击“确定”按钮关闭条件设立窗口。

在用例编辑器左侧的“添加动作”栏,点击“显示”。

在右侧“配置动作”栏,选择“固定头部”动态面板。

在左侧“添加动作”栏,点击“隐藏”。

在右侧“配置动作栏”,选择“滚动头部”组合。

点击“确定”按钮关闭用例编辑器。

STEP4:设置隐藏固定头部并且显示滚动头部的交互

在属性页签下,双击“窗口滚动时”来添加第二个窗口滚动时用例。

在左侧“添加动作”栏,点击“隐藏”。

在右侧“配置动作”栏,选择“固定头部”动态面板。

在左侧“添加动作”栏,点击“显示”。

在右侧“配置动作”栏,选择“滚动头部”。

点击“确定”按钮关闭用例编辑器。

STEP5:预览

点击预览。

尝试向下滚动窗口直到看到固定头部,然后再向上滚动窗口直到固定头部消失。

评论(0)

发表评论

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